Revision 1131645 of <flex>

Revision slug: Web/CSS/flex_value
Revision title: <flex>
Revision id: 1131645
Created: Oct 18, 2016, 4:05:10 PM
Creator: Sebastianz
Is current revision? Yes
Comment Initial description of <flex> data type and fr unit

Tags:

Revision Content

Summary

The <flex> CSS data type denotes a flexible length within a grid container, which is declared as dimension with the unit fr.

Examples

1fr    /* Using an integer value */
2.5fr  /* Using a float value */

Specifications

Specification	Status	Comment
{{SpecName("CSS Grid", "#typedef-flex", "<flex>")}}	{{Spec2("CSS Grid")}}	Initial definition

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	{{CompatNo}}^[1]	{{CompatEdge("12.10240")}}	{{CompatNo}}^[2]	{{CompatIE("10.0")}}	{{CompatNo}}^[1]	{{CompatNightly("Safari")}}

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	{{CompatNo}}	{{CompatNo}}^[2]	{{CompatIE("10.0")}}	{{CompatNo}}	{{CompatNo}}

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0 and Opera 28.0.

[2] Implemented behind the preference layout.css.grid.enabled, defaulting to false.

Revision Source

<div>{{CSSRef}}</div>

<h2>Summary</h2>

<p>The <strong><code>&lt;flex&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> data type denotes a flexible length within a grid container, which is declared as dimension with the unit <code>fr</code>.</p>

<h2>Examples</h2>

<pre class="brush: css">
1fr    /* Using an integer value */
2.5fr  /* Using a float value */
</pre>

<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("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
   <td>{{Spec2("CSS Grid")}}</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>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatEdge("12.10240")}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatIE("10.0")}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNightly("Safari")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatIE("10.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Implemented behind the <em>experimental Web Platform features</em> flag in <code>chrome://flags</code> since Chrome 29.0 and Opera 28.0.</p>

<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code>, defaulting to <code>false</code>.</p>

Revert to this revision