flex

  • Raccourci de la révision : CSS/flex
  • Titre de la révision : flex
  • ID de la révision : 507409
  • Créé :
  • Créateur : teoli
  • Version actuelle ? Oui
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

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.

{{cssbox("flex")}}

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'>
Voir {{ Xref_cssnumber() }} pour plus de détails. Une valeur négative n’est pas acceptée
<'flex-shrink'>
Voir {{ Xref_cssnumber() }} pour plus de détails. Une valeur négative n’est pas acceptée. Cet élément est optionnel.
<'flex-basis'>
Définit 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

Spécification Statut Commentaire
{{ SpecName('CSS3 Flexbox', '#flex', 'flex') }} {{ Spec2('CSS3 Flexbox') }}  

Tableau de compatibilité

{{ CompatibilityTable() }}

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base {{ CompatUnknown() }} 21.0{{ property_prefix("-webkit") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Fonction Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

Source de la révision

<p>{{ CSSRef() }}</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>
<p>{{cssbox("flex")}}</p>
<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>
<h3 id="Valeurs">Valeurs</h3>
<dl>
 <dt>
  <code>&lt;'flex-grow'&gt;</code></dt>
 <dd>
  Voir {{ 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>
  Voir {{ 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>
  Définit les bases flex de l’élément. Toute valeur qui serait valide pour les propriétés <code>width</code> et <code>length</code> est acceptable. Une taille voulue de <code>0</code> doit spécifier l’unité pour ne pas être traitée comme une flexibilité. Valeur par défaut de <code>0%</code>.</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>Spécification</th>
   <th>Statut</th>
   <th>Commentaire</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>Fonction</th>
    <th>Firefox (Gecko)</th>
    <th>Chrome</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Support de base</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>Fonction</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>Support de base</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
Revenir à cette révision