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

mozilla

Revision 4081 of flex-wrap

  • Revision slug: CSS/flex-wrap
  • Revision title: flex-wrap
  • Revision id: 4081
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment Creation of the flex-wrap property page; page created, 534 words added

Revision Content

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>flex-wrap</code> <a href="mks://localhost/en/CSS" title="CSS">CSS</a> property specifies whether the children are forced into a single line or if the items can be flowed on multiple lines. <nobr>
    <style type="text/css">/*<![CDATA[*/.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}

    /*]]>*/
    </style>
    </nobr></p>
<ul class="cssprop"><nobr>
    <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("nowrap") }}</li>
    <li><dfn>Applies to:</dfn> flexboxes</li>
    <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
    <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
    <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
    </nobr>
</ul>
<nobr> </nobr>
<h2>Syntax</h2>
<pre class="twopartsyntaxbox"><nobr>Formal grammar: &lt;flex-wrap&gt;{1}
                where &lt;border-style&gt; is nowrap | wrap | wrap-reverse
</nobr>
</pre>
<nobr>
<pre>flex-direction: <em>nowrap | wrap | wrap-reverse</em>
</pre>
<h3>Values</h3>
<dl>
    <dd>The following values are accepted:
        <table class="standard-table">
            <tbody>
                <tr>
                    <td style="vertical-align:middle;"><code>nowrap</code></td>
                    <td style="vertical-align:middle;">The flexbox items are laid out in a single line which may cause the flexbox to overflow. The "cross-start" is either equivalent to "start" or "before" depending <code>flex-direction</code> value</td>
                </tr>
                <tr>
                    <td style="vertical-align:middle;"><code>wrap</code></td>
                    <td style="vertical-align:middle;">The flexbox items break into multiple lines. The "cross-start" is either equivalent to "start" or "before" depending <code>flex-direction</code> value and the "cross-end" is the opposite of the specified "cross-start".</td>
                </tr>
                <tr>
                    <td style="vertical-align:middle;"><code>wrap-reverse</code></td>
                    <td style="vertical-align:middle;">Behaves the same as <code>wrap</code> but "cross-start" and "cross-end" are permuted.</td>
                </tr>
            </tbody>
        </table>
    </dd>
</dl>
<h2>Examples</h2>
<pre>element {
  flex-wrap: nowrap;
}
</pre>
<h2 name="Specifications">Specifications</h2>
<table class="standard-table">
    <thead>
        <tr style="background-color: rgb(255, 204, 255);">
            <th scope="col">Specification</th>
            <th scope="col">Status</th>
            <th scope="col">Comment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-wrap" title="http://dev.w3.org/csswg/css3-flexbox/#flex-wrap">CSS Flexible Box Layout Module</a></td>
            <td>{{ Spec2('CSS3 Flexbox') }}</td>
            <td></td>
        </tr>
    </tbody>
</table>
<h2>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>{{ CompatUnknown() }}</td>
                <td>{{ CompatUnknown() }}</td>
                <td>{{ CompatUnknown() }}</td>
                <td>{{ CompatUnknown() }}</td>
                <td>{{ CompatUnknown() }}</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&nbsp;Phone</th>
                <th>Opera Mobile</th>
                <th>Safari Mobile</th>
            </tr>
            <tr>
                <td>Basic support</td>
                <td>{{ CompatUnknown() }}</td>
                <td>{{ CompatUnknown() }}</td>
                <td>{{ CompatUnknown() }}</td>
                <td>{{ CompatUnknown() }}</td>
                <td>{{ CompatUnknown() }}</td>
            </tr>
        </tbody>
    </table>
</div>
<h2>See also</h2>
</nobr>
<p><nobr></nobr></p>

Revision Source

<p>&lt;p&gt;{{ CSSRef() }}&lt;/p&gt;<br> &lt;h2&gt;Summary&lt;/h2&gt;<br> &lt;p&gt;The &lt;code&gt;flex-wrap&lt;/code&gt; &lt;a href="<a class=" external" href="mks://localhost/en/CSS" rel="freelink">mks://localhost/en/CSS</a>" title="CSS"&gt;CSS&lt;/a&gt; property specifies whether the children are forced into a single line or if the items can be flowed on multiple lines. &lt;nobr&gt;<br>     &lt;style type="text/css"&gt;/*&lt;![CDATA[*/.cssprop {<br>   display:table;<br>   padding: 0.4em;<br>   border-left:0.15em solid;<br>   background-color:#eeeeff<br> }<br> .cssprop li {<br>  display:table-row;<br>  padding: 3px;<br>  margin:0;<br> }<br> .cssprop li dfn {<br>   display:table-cell;<br>   padding: 0 5px;<br>   border-bottom: none;<br>   cursor:inherit;<br> }<br> <br>     /*]]&gt;*/<br>     &lt;/style&gt;<br>     &lt;/nobr&gt;&lt;/p&gt;<br> &lt;ul class="cssprop"&gt;&lt;nobr&gt;<br>     &lt;li&gt;&lt;dfn&gt;{{ Xref_cssinitial() }}:&lt;/dfn&gt; {{ Cssxref("nowrap") }}&lt;/li&gt;<br>     &lt;li&gt;&lt;dfn&gt;Applies to:&lt;/dfn&gt; flexboxes&lt;/li&gt;<br>     &lt;li&gt;&lt;dfn&gt;{{ Xref_cssinherited() }}:&lt;/dfn&gt; no&lt;/li&gt;<br>     &lt;li&gt;&lt;dfn&gt;Media:&lt;/dfn&gt; {{ Xref_cssvisual() }}&lt;/li&gt;<br>     &lt;li&gt;&lt;dfn&gt;{{ Xref_csscomputed() }}:&lt;/dfn&gt; as specified&lt;/li&gt;<br>     &lt;/nobr&gt;<br> &lt;/ul&gt;<br> &lt;nobr&gt; &lt;/nobr&gt;<br> &lt;h2&gt;Syntax&lt;/h2&gt;<br> &lt;pre class="twopartsyntaxbox"&gt;&lt;nobr&gt;Formal grammar: &amp;lt;flex-wrap&amp;gt;{1}<br>                 where &amp;lt;border-style&amp;gt; is nowrap | wrap | wrap-reverse<br> &lt;/nobr&gt;<br> &lt;/pre&gt;<br> &lt;nobr&gt;<br> &lt;pre&gt;flex-direction: &lt;em&gt;nowrap | wrap | wrap-reverse&lt;/em&gt;<br> &lt;/pre&gt;<br> &lt;h3&gt;Values&lt;/h3&gt;<br> &lt;dl&gt;<br>     &lt;dd&gt;The following values are accepted:<br>         &lt;table class="standard-table"&gt;<br>             &lt;tbody&gt;<br>                 &lt;tr&gt;<br>                     &lt;td style="vertical-align:middle;"&gt;&lt;code&gt;nowrap&lt;/code&gt;&lt;/td&gt;<br>                     &lt;td style="vertical-align:middle;"&gt;The flexbox items are laid out in a single line which may cause the flexbox to overflow. The "cross-start" is either equivalent to "start" or "before" depending &lt;code&gt;flex-direction&lt;/code&gt; value&lt;/td&gt;<br>                 &lt;/tr&gt;<br>                 &lt;tr&gt;<br>                     &lt;td style="vertical-align:middle;"&gt;&lt;code&gt;wrap&lt;/code&gt;&lt;/td&gt;<br>                     &lt;td style="vertical-align:middle;"&gt;The flexbox items break into multiple lines. The "cross-start" is either equivalent to "start" or "before" depending &lt;code&gt;flex-direction&lt;/code&gt; value and the "cross-end" is the opposite of the specified "cross-start".&lt;/td&gt;<br>                 &lt;/tr&gt;<br>                 &lt;tr&gt;<br>                     &lt;td style="vertical-align:middle;"&gt;&lt;code&gt;wrap-reverse&lt;/code&gt;&lt;/td&gt;<br>                     &lt;td style="vertical-align:middle;"&gt;Behaves the same as &lt;code&gt;wrap&lt;/code&gt; but "cross-start" and "cross-end" are permuted.&lt;/td&gt;<br>                 &lt;/tr&gt;<br>             &lt;/tbody&gt;<br>         &lt;/table&gt;<br>     &lt;/dd&gt;<br> &lt;/dl&gt;<br> &lt;h2&gt;Examples&lt;/h2&gt;<br> &lt;pre&gt;element {<br>   flex-wrap: nowrap;<br> }<br> &lt;/pre&gt;<br> &lt;h2 name="Specifications"&gt;Specifications&lt;/h2&gt;<br> &lt;table class="standard-table"&gt;<br>     &lt;thead&gt;<br>         &lt;tr style="background-color: rgb(255, 204, 255);"&gt;<br>             &lt;th scope="col"&gt;Specification&lt;/th&gt;<br>             &lt;th scope="col"&gt;Status&lt;/th&gt;<br>             &lt;th scope="col"&gt;Comment&lt;/th&gt;<br>         &lt;/tr&gt;<br>     &lt;/thead&gt;<br>     &lt;tbody&gt;<br>         &lt;tr&gt;<br>             &lt;td&gt;&lt;a class="external" href="<a class=" external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-wrap" rel="freelink">http://dev.w3.org/csswg/css3-flexbox/#flex-wrap</a>" title="<a class=" external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-wrap" rel="freelink">http://dev.w3.org/csswg/css3-flexbox/#flex-wrap</a>"&gt;CSS Flexible Box Layout Module&lt;/a&gt;&lt;/td&gt;<br>             &lt;td&gt;{{ Spec2('CSS3 Flexbox') }}&lt;/td&gt;<br>             &lt;td&gt;&lt;/td&gt;<br>         &lt;/tr&gt;<br>     &lt;/tbody&gt;<br> &lt;/table&gt;<br> &lt;h2&gt;Browser compatibility&lt;/h2&gt;<br> &lt;p&gt;{{ CompatibilityTable() }}&lt;/p&gt;<br> &lt;div id="compat-desktop"&gt;<br>     &lt;table class="compat-table"&gt;<br>         &lt;tbody&gt;<br>             &lt;tr&gt;<br>                 &lt;th&gt;Feature&lt;/th&gt;<br>                 &lt;th&gt;Firefox (Gecko)&lt;/th&gt;<br>                 &lt;th&gt;Chrome&lt;/th&gt;<br>                 &lt;th&gt;Internet Explorer&lt;/th&gt;<br>                 &lt;th&gt;Opera&lt;/th&gt;<br>                 &lt;th&gt;Safari&lt;/th&gt;<br>             &lt;/tr&gt;<br>             &lt;tr&gt;<br>                 &lt;td&gt;Basic support&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>             &lt;/tr&gt;<br>         &lt;/tbody&gt;<br>     &lt;/table&gt;<br> &lt;/div&gt;<br> &lt;div id="compat-mobile"&gt;<br>     &lt;table class="compat-table"&gt;<br>         &lt;tbody&gt;<br>             &lt;tr&gt;<br>                 &lt;th&gt;Feature&lt;/th&gt;<br>                 &lt;th&gt;Firefox Mobile (Gecko)&lt;/th&gt;<br>                 &lt;th&gt;Android&lt;/th&gt;<br>                 &lt;th&gt;IE&amp;nbsp;Phone&lt;/th&gt;<br>                 &lt;th&gt;Opera Mobile&lt;/th&gt;<br>                 &lt;th&gt;Safari Mobile&lt;/th&gt;<br>             &lt;/tr&gt;<br>             &lt;tr&gt;<br>                 &lt;td&gt;Basic support&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>                 &lt;td&gt;{{ CompatUnknown() }}&lt;/td&gt;<br>             &lt;/tr&gt;<br>         &lt;/tbody&gt;<br>     &lt;/table&gt;<br> &lt;/div&gt;<br> &lt;h2&gt;See also&lt;/h2&gt;<br> &lt;/nobr&gt;<br> &lt;p&gt;&lt;nobr&gt;&lt;/nobr&gt;&lt;/p&gt;</p>
Revert to this revision