flex

  • Raccourci de la révision : CSS/flex
  • Titre de la révision : flex
  • ID de la révision : 441273
  • Créé :
  • Créateur : Delapouite
  • Version actuelle ? Non
  • Commentaire added tags

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS flex permet à un élément flex de modifier ses dimensions afin de remplir l’espace disponible. Les éléments flex peuvent être distendu jusqu’à un espace de taille proportionnelle à leur ratio d’extension (ou de compression) flex.

  • {{ Xref_cssinitial() }} CF les propriétés particulières
  • Applies to éléments flex
  • {{ Xref_cssinherited() }} non
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}CF les propriétés particulières

Reportez-vous à la page « Utilisez les boîtes flexibles » pour plus d’informations et de propriétés.

Syntaxe

Formal grammar: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
flex: none                                            /* value 'none' case */
flex: <'flex-grow'>                                   /* One value syntax, variation 1 */
flex: <'flex-basis'>                                  /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */

Valeurs

<'flex-grow'>
CF {{ Xref_cssnumber() }} pour plus de détails. Une valeur négative n’est pas acceptée
<'flex-shrink'>
CF {{ Xref_cssnumber() }} pour plus de détails. Une valeur négative n’est pas acceptée. Cet élément est optionnel.
<'flex-basis'>
Définis les bases flex de l’élément. Toute valeur qui serait valide pour les propriétés width et length est acceptable. Une taille voulue de 0 doit spécifier l’unité pour ne pas être traitée comme une flexibilité. Valeur par défaut de 0%
none
Ce mot-clé équivaut à 0 0 auto
 
auto
Ce mot-clé équivaut à 1 1 auto.
initial
Ce mot-clé équivaut à 0 1 auto.
Note: La valeur par défaut de<'flex-basis'> n’est pas la même que la valeur par défaut de la propriété flex-basis.
Note: En l’absence de valeur précise, <'flex-grow'> et <'flex-shrink'> seront égaux à 1

Exemples

Specifications

Specification Status Comment
{{ SpecName('CSS3 Flexbox', '#flex', 'flex') }} {{ Spec2('CSS3 Flexbox') }}  

Tableau de compatibilité

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} 21.0{{ property_prefix("-webkit") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété CSS flex permet à un élément flex de modifier ses dimensions afin de remplir l’espace disponible. Les éléments flex peuvent être distendu jusqu’à un espace de taille proportionnelle à leur ratio d’extension (ou de compression) flex.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> CF les propriétés particulières</li>
  <li><dfn>Applies to</dfn> éléments flex</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> non</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn>CF les propriétés particulières</li>
</ul>
<p>Reportez-vous à la page « <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes">Utilisez les boîtes flexibles</a> » pour plus d’informations et de propriétés.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
Formal grammar: none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ] 
</pre>
<pre>
flex: none &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                     <em>/* value 'none' case */
</em>flex: &lt;'flex-grow'&gt;<em>                                   /* One value syntax, variation 1 */
</em>flex: &lt;'flex-basis'&gt;                                  <em>/* One value syntax, variation 2 */
</em>flex: &lt;'flex-grow'&gt; &lt;'flex-basis'&gt; &nbsp; &nbsp;&nbsp;               <em>/* Two values syntax, variation 1 */
</em>flex: &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;                   <em>/* Two values syntax, variation 2 */
</em>flex: &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt; &lt;'flex-basis'&gt; &nbsp;&nbsp; <em>/* Three values syntax */
</em>
</pre>
<h4 id="Valeurs">Valeurs</h4>
<dl>
  <dt>
    <code>&lt;'flex-grow'&gt;</code></dt>
  <dd>
    CF {{ Xref_cssnumber() }} pour plus de détails. Une valeur négative n’est pas acceptée</dd>
  <dt>
    <code>&lt;'flex-shrink'&gt;</code></dt>
  <dd>
    CF {{ Xref_cssnumber() }} pour plus de détails. Une valeur négative n’est pas acceptée. Cet élément est optionnel.</dd>
  <dt>
    <code>&lt;'flex-basis'&gt;</code></dt>
  <dd>
    <code>Définis les bases flex de l’élément. Toute valeur qui serait valide pour les propriétés width et length</code> est acceptable. Une taille voulue de 0 doit spécifier l’unité pour ne pas être traitée comme une flexibilité. Valeur par défaut de 0%</dd>
  <dt>
    <code>none</code></dt>
  <dd>
    Ce mot-clé équivaut à 0 0 auto</dd>
  <dt>
    &nbsp;</dt>
  <dt>
    <code>auto</code></dt>
  <dd>
    Ce mot-clé équivaut à <code>1 1 auto</code>.</dd>
  <dt>
    <code>initial</code></dt>
  <dd>
    Ce mot-clé équivaut à <code>0 1 auto</code>.</dd>
</dl>
<div class="note">
  Note: <code>La valeur par défaut de&lt;'flex-basis'&gt;</code> n’est pas la même que la valeur par défaut de la propriété <a href="/en/CSS/flex-basis" title="en/CSS/flex-basis"><code>flex-basis</code></a>.</div>
<div class="note">
  Note: En l’absence de valeur précise, <code>&lt;'flex-grow'&gt;</code> et <code>&lt;'flex-shrink'&gt;</code> seront égaux à 1</div>
<h2 id="Exemples">Exemples</h2>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th>Specification</th>
      <th>Status</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Flexbox', '#flex', 'flex') }}</td>
      <td>{{ Spec2('CSS3 Flexbox') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Tableau_de_compatibilit.C3.A9">Tableau de compatibilité</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>21.0{{ property_prefix("-webkit") }}</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 id="See_also">See also</h2>
Revenir à cette révision