1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: CSS Flexible Box Layout
slug: Web/CSS/CSS_Flexible_Box_Layout
tags:
- CSS
- CSS Flexible Boxes
- NeedsTranslation
- Overview
- Reference
- TopicStub
translation_of: Web/CSS/CSS_Flexible_Box_Layout
---
<div>{{CSSRef}}</div>
<p class="summary"><strong>CSS Flexible Box Layout</strong> is a module of <a href="/en-US/docs/Web/CSS">CSS</a> that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.</p>
<h2 id="Basic_Example">Basic Example</h2>
<p>In the following example a container has been set to <code>display: flex</code>, which means that the three child items become flex items. The value of <code>justify-content</code> has been set to <code>space-between</code> in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of <code>align-items </code>being <code>stretch</code>. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.</p>
<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
<h2 id="Reference">Reference</h2>
<h3 id="CSS_Properties">CSS Properties</h3>
<div class="index">
<ul>
<li>{{cssxref("align-content")}}</li>
<li>{{cssxref("align-items")}}</li>
<li>{{cssxref("align-self")}}</li>
<li>{{cssxref("flex")}}</li>
<li>{{cssxref("flex-basis")}}</li>
<li>{{cssxref("flex-direction")}}</li>
<li>{{cssxref("flex-flow")}}</li>
<li>{{cssxref("flex-grow")}}</li>
<li>{{cssxref("flex-shrink")}}</li>
<li>{{cssxref("flex-wrap")}}</li>
<li>{{cssxref("justify-content")}}</li>
<li>{{cssxref("order")}}</li>
</ul>
</div>
<h3 id="Glossary_entries">Glossary entries</h3>
<div class="index">
<ul>
<li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li>
<li><a href="/en-US/docs/Glossary/Flex_Container">Flex Container</a></li>
<li><a href="/en-US/docs/Glossary/Flex_Item">Flex Item</a></li>
<li><a href="/en-US/docs/Glossary/Main_Axis">Main Axis</a></li>
<li><a href="/en-US/docs/Glossary/Cross_Axis">Cross Axis</a></li>
<li><a href="/en-US/docs/Glossary/Flex">Flex</a></li>
</ul>
</div>
<h2 id="Guides">Guides</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></dt>
<dd>An overview of the features of flexbox</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></dt>
<dd>How flexbox relates to other layout methods, and other CSS specifications</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></dt>
<dd>How the Box Alignment properties work with flexbox.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></dt>
<dd>Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></dt>
<dd>This article explains the flex-grow, flex-shrink and flex-basis properties.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></dt>
<dd>How to create flex containers with multiple lines and control the display of the items in those lines.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></dt>
<dd>Common design patterns that are typical flexbox use cases.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards compatibility of Flexbox</a></dt>
<dd>Browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec</dd>
</dl>
<h2 id="External_resources">External resources</h2>
<ul>
<li><a href="https://github.com/philipwalton/flexbugs">Flexbugs — a community curated list of flexbox browser bugs and workarounds</a></li>
</ul>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Flexbox') }}</td>
<td>{{ Spec2('CSS3 Flexbox') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatGeckoDesktop("20.0")}}</td>
<td>21.0{{property_prefix("-webkit")}}<br>
29.0</td>
<td>10.0{{property_prefix("-ms")}}<br>
11.0</td>
<td>12.10</td>
<td>6.1{{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown()}}</td>
<td>4.4</td>
<td>11</td>
<td>12.10</td>
<td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
</tr>
</tbody>
</table>
</div>
<p> </p>
|
