Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Compare Revisions

align-content

Change Revisions

Revision 4495:

Revision 4495 by FredB on

Revision 289882:

Revision 289882 by teoli on

Title:
align-content
align-content
Slug:
CSS/align-content
CSS/align-content
Tags:
css, NeedsExample, NeedsBrowserCompatibility, "CSS Reference", "Flexible Box"
css, Flexible Box, CSS Reference, NeedsExample
Content:

Revision 4495
Revision 289882
n21        <nobr><dfn>{{ Xref_cssinitial() }}:</dfn> <code>stretch</n21        <dfn>{{ Xref_cssinitial() }}:</dfn> <code>stretch</code>
>code></nobr> 
22      </li>
23      <li>22      </li>
24        <nobr><dfn>Applies to:</dfn> multi-line flex containers</
>nobr> 
25      </li>23      <li>
24        <dfn>Applies to:</dfn> multi-line flex containers
26      <li>25      </li>
27        <nobr><dfn>{{ Xref_cssinherited() }}:</dfn> no</nobr>
28      </li>26      <li>
27        <dfn>{{ Xref_cssinherited() }}:</dfn> no
29      <li>28      </li>
30        <nobr><dfn>Media:</dfn> {{ Xref_cssvisual() }}</nobr>
31      </li>29      <li>
30        <dfn>Media:</dfn> {{ Xref_cssvisual() }}
32      <li>31      </li>
32      <li>
33        <nobr><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</33        <dfn>{{ Xref_csscomputed() }}:</dfn> as specified
>nobr> 
n37      <nobr>See <a href="/en/CSS/Using_CSS_flexible_boxes" title=n37      See <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/C
>"/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> f>SS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> for mor
>or more properties and information.</nobr>>e properties and information.
n40      <nobr>Syntax</nobr>n40      Syntax
n43<nobr>Formal grammar: &lt;align-content&gt; n43Formal grammar: &lt;align-content&gt; 
n45</nobr>n
n48<nobr>align-content: <em>flex-start | flex-end | center | justifyn47align-content: <em>flex-start | flex-end | center | justify | dis
> | distribute | stretch</em>>tribute | stretch</em>
49</nobr>
n52      <nobr>Values</nobr>n50      Values
n56        <nobr><code>flex-start</code></nobr>n54        <code>flex-start</code>
57      </dt>
58      <dd>55      </dt>
56      <dd>
59        <nobr>Lines are packed starting from the cross-start. Cro57        Lines are packed starting from the cross-start. Cross-sta
>ss-start edge of the first line and cross-start edge of the flex >rt edge of the first line and cross-start edge of the flex contai
>container are flushed together. Each following line is flush with>ner are flushed together. Each following line is flush with the p
> the preceding.</nobr>>receding.
60      </dd>
61      <dt>
62        <nobr><code>flex-end</code></nobr>
63      </dt>
64      <dd>58      </dd>
59      <dt>
60        <code>flex-end</code>
61      </dt>
62      <dd>
65        <nobr>Lines are packed starting from the cross-end. Cross63        Lines are packed starting from the cross-end. Cross-end o
>-end of the last line and cross-end of the flex container are flu>f the last line and cross-end of the flex container are flushed t
>shed together. Each preceding line is flushed with the following >ogether. Each preceding line is flushed with the following line.
>line.</nobr> 
66      </dd>
67      <dt>
68        <nobr><code>center</code></nobr>
69      </dt>
70      <dd>64      </dd>
65      <dt>
66        <code>center</code>
67      </dt>
68      <dd>
71        <nobr>Lines are packed toward the center of the flex cont69        Lines are packed toward the center of the flex container.
>ainer. The lines are flushed with each other and aligned in the c> The lines are flushed with each other and aligned in the center 
>enter of the flex container. Space between the cross-start edge o>of the flex container. Space between the cross-start edge of the 
>f the flex container and first line and between cross-end of the >flex container and first line and between cross-end of the flex c
>flex container and the last line is the same.</nobr>>ontainer and the last line is the same.
72      </dd>
73      <dt>
74        <nobr><code>space-between</code></nobr>
75      </dt>
76      <dd>70      </dd>
71      <dt>
72        <code>space-between</code>
73      </dt>
74      <dd>
77        <nobr>Lines are evenly distributed in the flex container.75        Lines are evenly distributed in the flex container. The s
> The spacing is done such as the space between two adjacent items>pacing is done such as the space between two adjacent items is th
> is the same. Cross-start edge and cross-end edge of the flex con>e same. Cross-start edge and cross-end edge of the flex container
>tainer are flushed with respectively first and last line edges.</> are flushed with respectively first and last line edges.
>nobr> 
78      </dd>
79      <dt>
80        <nobr><code>space-around</code></nobr>
81      </dt>
82      <dd>76      </dd>
77      <dt>
78        <code>space-around</code>
79      </dt>
80      <dd>
83        <nobr>Lines are evenly distributed so that the space betw81        Lines are evenly distributed so that the space between tw
>een two adjacent lines is the same. The empty space before the fi>o adjacent lines is the same. The empty space before the first an
>rst and after the last lines equals half of the space between two>d after the last lines equals half of the space between two adjac
> adjacent lines.</nobr>>ent lines.
84      </dd>
85      <dt>
86        <nobr><code>stretch</code></nobr>
87      </dt>
88      <dd>82      </dd>
83      <dt>
84        <code>stretch</code>
85      </dt>
86      <dd>
89        <nobr>Lines stretch to use the remaining space. The free-87        Lines stretch to use the remaining space. The free-space 
>space is split equally between all the lines.</nobr>>is split equally between all the lines.
n93      <nobr>Examples</nobr>n91      Examples
n96<nobr> </nobr>n94 
n103        <tr style="background-color: rgb(255, 204, 255);">n101        <tr>
n133      <nobr>{{ page{path: "/en/CSS/Using_CSS_flexible_boxes", secn131      {{ CompatibilityTable() }}
>tion: "Browser compatibility"} }}</nobr> 
132    </p>
133    <div id="compat-desktop">
134      <table class="compat-table">
135        <tbody>
136          <tr>
137            <th>
138              Feature
139            </th>
140            <th>
141              Firefox (Gecko)
142            </th>
143            <th>
144              Chrome
145            </th>
146            <th>
147              Internet Explorer
148            </th>
149            <th>
150              Opera
151            </th>
152            <th>
153              Safari
154            </th>
155          </tr>
156          <tr>
157            <td>
158              Basic support
159            </td>
160            <td>
161              {{ CompatUnknown() }}
162            </td>
163            <td>
164              21.0{{ property_prefix("-webkit") }}
165            </td>
166            <td>
167              {{ CompatUnknown() }}
168            </td>
169            <td>
170              {{ CompatUnknown() }}
171            </td>
172            <td>
173              {{ CompatUnknown() }}
174            </td>
175          </tr>
176        </tbody>
177      </table>
134    </p>178    </div>
179    <table class="compat-table">
180      <tbody>
181        <tr>
182          <th>
183            Feature
184          </th>
185          <th>
186            Firefox Mobile (Gecko)
187          </th>
188          <th>
189            Android
190          </th>
191          <th>
192            IE&nbsp;Phone
193          </th>
194          <th>
195            Opera Mobile
196          </th>
197          <th>
198            Safari Mobile
199          </th>
200        </tr>
201        <tr>
202          <td>
203            Basic support
204          </td>
205          <td>
206            {{ CompatUnknown() }}
207          </td>
208          <td>
209            {{ CompatUnknown() }}
210          </td>
211          <td>
212            {{ CompatUnknown() }}
213          </td>
214          <td>
215            {{ CompatUnknown() }}
216          </td>
217          <td>
218            {{ CompatUnknown() }}
219          </td>
220        </tr>
221      </tbody>
222    </table>
tt226    <ul>
227      <li>Using Flexible Boxes
228      </li>
229      <li>{{ CSS_Reference:FlexBox() }}
230      </li>
231    </ul>

Back to History