mozilla

Révision 623671 sur display

  • Raccourci de la révision : Web/CSS/display
  • Titre de la révision : display
  • ID de la révision : 623671
  • Créé :
  • Créateur : teoli
  • Version actuelle ? Oui
  • Commentaire CSS/display Web/CSS/display
Étiquettes : 

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS display définit le type de rendu de boîte à utiliser pour un élément donné. Pour un langage comme HTML, où les éléments existants ont un comportement bien défini, les valeurs par défaut de la propriété display sont extraites des comportements décrits dans les spécifications HTML ou depuis la feuille de style par défaut du navigateur ou de l'utilisateur. Pour des langages où le comportement de l'affichage n'est pas défini (comme XML), la valeur par défaut est inline.

Outre les nombreux types d'affichage de boîte autorisés, il existe une autre valeur, none, qui permet de ne pas afficher un élément ni aucun de ses descendants. Le document est rendu comme si cet élément n'existait pas dans l'arbre du document. Cette valeur offre de puissantes possibilités, mais elle doit être utilisée avec précaution.

{{cssbox("display")}}

Syntaxe

Syntaxe formelle : {{csssyntax("display")}}
display: none

display: inline
display: block
display: list-item
display: inline-block
display: inline-table
display: table
display: table-cell
display: table-column
display: table-column-group
display: table-footer-group
display: table-header-group
display: table-row
display: table-row-group
display: flex
display: inline-flex
display: grid
display: inline-grid
display: run-in

display: inherit

Valeurs

display-value
Les différentes valeurs de display et leur signification sont :
Ensemble de valeurs Valeur Description
Valeurs basiques (CSS 1) none

Désactive l'affichage d'un élément (il n'a aucun effet sur la mise en page) ; tous les descendants sont également cachés. Le document est affiché comme si l'élément n'existait pas.

Pour prendre en compte les dimensions d'un élément boîte dans le schéma de formatage du document, bien que son contenu soit invisible, voir la propriété visibility.

inline L'élément génère une ou plusieurs boîtes en-ligne.
block L'élément génère une boîte de type bloc.
list-item L'élément génère une boîte de type bloc pour le contenu et une boîte séparée en-ligne pour les éléments de liste.
Valeurs étendues (CSS 2.1) inline-block L'élément génère une boîte de type bloc en flux , avec le contenu l'entourant comme une simple boîte en-ligne (se comporte comme le ferait un élément replacé).
Valeurs du modèle de table (CSS 2.1) inline-table La valeur inline-table n'a pas de correspondance directe en HTML. L'élément se comporte comme un élément HTML <table> mais avec une boîte en-ligne plutôt que de type bloc.
table Se comporte comme l'élément HTML <table>. Il définit une boîte de type bloc.
table-caption Se comporte comme l'élément HTML <caption>.
table-cell Se comporte comme l'élément HTML <td>.
table-column Ces éléments se comportent comme des éléments HTML <col> correspondants.
table-column-group Ces éléments se comportent comme des éléments HTML <colgroup> correspondants.
table-footer-group Ces éléments se comportent comme des éléments HTML <tfoot> correspondants.
table-header-group Ces éléments se comportent comme des éléments HTML <thead> correspondants.
table-row Se comporte comme l'élément HTML <tr>.
table-row-group Ces éléments se comportent comme des éléments HTML <tbody> correspondants.
Valeurs du modèle de boîte flexible (CSS3) flex L'élément se comporte comme un bloc et dispose son contenu selon le modèle des boîtes flexibles.
inline-flex L'élément se comporte comme un élément en-ligne et dispose son contenu selon le modèle des boîtes flexibles.
Valeurs du modèle de boîte Grid (CSS3) {{experimental_inline}} grid

L'élément se comporte comme un bloc et dispose son contenu selon le modèle de boîte Grid.

Cette valeur étant expérimentale, la plupart des navigateurs ne la supportent pas. Noter particulièrement que la valeur -moz-grid n'est pas la version préfixée de cette valeur, mais un modèle d'affichage XUL qui ne doit pas être utilisé sur un site internet.
inline-grid L'élément se comporte comme un élément en-ligne et dispose son contenu selon le modèle de boîte Grid.
Valeurs expérimentales {{experimental_inline}} run-in
  • Si la boîte run-in contient un élément bloc, comme block.
  • Si un élément bloc suit la boîte run-in, la boîte run-in devient la première boîte en-ligne de l'élément bloc.
  • Si une boîte en-ligne suit, la boîte run-in devient un élément bloc.

Exemples

{{ CSSRefExampleLink("display") }}

p.secret  { display: none }
<p style="display:none"> invisible text </p>

Notes

  • Conformité CSS1 : les navigateurs doivent tout à fait ignorer la propriété display et utiliser à la place les paramètres par défaut du navigateur pour chaque élément.
  • Dans CSS1, la valeur par défaut pour cette propriété était block. Dans CSS2 elle a été changée pour inline.
Éléments « bloc » et éléments « en-ligne »
  • Les éléments de type bloc créent des blocs de contenu verticalement distincts (dans le contexte visuel), généralement en utilisant des retours à la ligne avant et après le contenu. Seule cette valeur de display permet de générer des éléments positionnés. Le comportement de type bloc est illustré par des éléments HTML tels que blockquote, div ou encore les titres hx. Les valeurs de la propriété display créant un élément de type bloc sont : block, list-item, table, compact et run-in.
  • Les éléments de type en-ligne ne créent pas de blocs distincts de contenu et le contenu de l'élément est rendu à l'aide d'une boîte ligne (le contenu est distribué ligne par ligne dans l'élément bloc, physique ou virtuel, le contenant). Le comportement de type en-ligne est illustré par des éléments HTML tels que le formatage physique et virtuel des caractères, les images non flottantes et les contenus non balisés. Les valeurs de la propriété display créant un élément de type en-ligne sont : inline, inline-table, compact et run-in.

Spécifications

Specification Status Comment
CSS Basic Box Model Working Draft Ajout de la valeur run-in.
CSS Grid Layout Working Draft Ajout des valeur du modèle de boîte Grid.
CSS Flexible Box Layout Module Candidate Recommendation Ajout des valeur du modèle de boîte flexible.
CSS Level 2 (Revision 1) Recommendation Ajout de inline-block et des valeurs du modèle de table.
CSS Level 1 Recommendation Valeurs basiques : none, block, inline, et list-item.

Compatibilité des navigateurs

{{CompatibilityTable}}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline et block 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5 (-7.0)
seulement les éléments naturellement en-ligne
7.0 1.0 (85)
list-item 1.0 1.0 (1.0) 6.0 7.0 1.0 (85)
run-in {{experimental_inline}} 1.0
Pas avant les éléments en-ligne
{{CompatNo}} 8.0 7.0 1.0 (85)
Pas avant les éléments en-ligne

4.0

Supprimé en version 32

5.0 (532.5)
inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-colgroup, table-header-group, table-row-group, table-footer-group, table-row, et table-caption 1.0 1.0 (1.0) 8.0 7.0 1.0 (85)
flex 21.0{{property_prefix("-webkit")}} {{CompatGeckoDesktop("18.0")}}(behind a pref) [1] {{CompatNo}} 12.50 {{CompatNo}}
inline-flex 21.0{{property_prefix("-webkit")}} {{CompatGeckoDesktop("18.0")}}(behind a pref) [1] {{CompatNo}} 12.50 {{CompatNo}}
grid {{experimental_inline}} {{CompatUnknown}} {{CompatNo}} 10.0{{property_prefix("-ms")}} {{CompatUnknown}} {{CompatUnknown}}
inline-grid {{experimental_inline}} {{CompatUnknown}} {{CompatNo}} 10.0{{property_prefix("-ms")}} {{CompatUnknown}} {{CompatUnknown}}
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[1] Pour activer le support des boîtes flexibles dans Firefox 18 et 19, l'utilisateur doit passer la préférence about:config "layout.css.flexbox.enabled" à true. Les boîtes flexibles multilignes sont supportées depuis Firefox 28.

Voir également

{{ Cssxref("visibility") }}, {{ Cssxref("position") }}, {{ Cssxref("float") }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>display</code> définit le type de rendu de boîte à utiliser pour un élément donné. Pour un langage comme HTML, où les éléments existants ont un comportement bien défini, les valeurs par défaut de la propriété <code>display</code> sont extraites des comportements décrits dans les spécifications HTML ou depuis la feuille de style par défaut du navigateur ou de l'utilisateur. Pour des langages où le comportement de l'affichage n'est pas défini (comme XML), la valeur par défaut est <code>inline</code>.</p>
<p>Outre les nombreux types d'affichage de boîte autorisés, il existe une autre valeur, <code>none</code>, qui permet de ne pas afficher un élément ni aucun de ses descendants. Le document est rendu comme si cet élément n'existait pas dans l'arbre du document. Cette valeur offre de puissantes possibilités, mais elle doit être utilisée avec précaution.</p>
<p>{{cssbox("display")}}</p>
<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
<a href="/fr/docs/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs">Syntaxe formelle</a> : <code>{{csssyntax("display")}}</code>
</pre>
<pre>
display: none

display: inline
display: block
display: list-item
display: inline-block
display: inline-table
display: table
display: table-cell
display: table-column
display: table-column-group
display: table-footer-group
display: table-header-group
display: table-row
display: table-row-group
display: flex
display: inline-flex
display: grid
display: inline-grid
display: run-in

display: inherit
</pre>
<h3 id="Valeurs" name="Valeurs">Valeurs</h3>
<dl>
 <dt>
  <strong><em>display-value</em></strong></dt>
 <dd>
  Les différentes valeurs de <code>display</code> et leur signification sont :
  <table class="standard-table">
   <thead>
    <tr>
     <td class="header" colspan="1">Ensemble de valeurs</td>
     <td class="header">Valeur</td>
     <td class="header">Description</td>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td colspan="1" rowspan="4">Valeurs basiques (CSS 1)</td>
     <td><code>none</code></td>
     <td>
      <p>Désactive l'affichage d'un élément (il n'a aucun effet sur la mise en page) ; tous les descendants sont également cachés. Le document est affiché comme si l'élément n'existait pas.</p>
      <p>Pour prendre en compte les dimensions d'un élément boîte dans le schéma de formatage du document, bien que son contenu soit invisible, voir la propriété <a href="/fr/docs/CSS/visibility"><code>visibility</code></a>.</p>
     </td>
    </tr>
    <tr>
     <td><code>inline</code></td>
     <td>L'élément génère une ou plusieurs boîtes en-ligne.</td>
    </tr>
    <tr>
     <td><code>block</code></td>
     <td>L'élément génère une boîte de type bloc.</td>
    </tr>
    <tr>
     <td><code>list-item</code></td>
     <td>L'élément génère une boîte de type bloc pour le contenu et une boîte séparée en-ligne pour les éléments de liste.</td>
    </tr>
    <tr>
     <td>Valeurs étendues (CSS 2.1)</td>
     <td><code>inline-block</code></td>
     <td>L'élément génère une boîte de type bloc
      <i>
       en flux</i>
      , avec le contenu l'entourant comme une simple boîte en-ligne (se comporte comme le ferait un élément replacé).</td>
    </tr>
    <tr>
     <td colspan="1" rowspan="10">Valeurs du modèle de table (CSS 2.1)</td>
     <td><code>inline-table</code></td>
     <td>La valeur<code> inline-table </code>n'a pas de correspondance directe en HTML. L'élément se comporte comme un élément HTML <a href="/fr/docs/Web/HTML/Element/table" title="The HTML Table Element (&lt;table&gt;) represents data in two dimensions or more."><code>&lt;table&gt;</code></a> mais avec une boîte en-ligne plutôt que de type bloc.</td>
    </tr>
    <tr>
     <td><code>table</code></td>
     <td>Se comporte comme l'élément HTML <a href="/fr/docs/Web/HTML/Element/table" title="The HTML Table Element (&lt;table&gt;) represents data in two dimensions or more."><code>&lt;table&gt;</code></a>. Il définit une boîte de type bloc.</td>
    </tr>
    <tr>
     <td><code>table-caption</code></td>
     <td>Se comporte comme l'élément HTML <a href="/fr/docs/Web/HTML/Element/caption" title="The HTML &lt;caption&gt; Element (or HTML Table Caption Element) represents the title of a table. Though it is always the first descendant of a &lt;table&gt;, its styling, using CSS, may place it elsewhere, relative to the table."><code>&lt;caption&gt;</code></a>.</td>
    </tr>
    <tr>
     <td><code>table-cell</code></td>
     <td>Se comporte comme l'élément HTML <a href="/fr/docs/Web/HTML/Element/td" title="The Table cell HTML element (&lt;td&gt;) defines a cell of a table that contains data. It participates in the table model."><code>&lt;td&gt;</code></a>.</td>
    </tr>
    <tr>
     <td><code>table-column</code></td>
     <td>Ces éléments se comportent comme des éléments HTML <a href="/fr/docs/Web/HTML/Element/col" title="The HTML &lt;col&gt; Element (or HTML Table Column Element) defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a &lt;colgroup&gt; element."><code>&lt;col&gt;</code></a> correspondants.</td>
    </tr>
    <tr>
     <td><code>table-column-group</code></td>
     <td>Ces éléments se comportent comme des éléments HTML <a href="/fr/docs/Web/HTML/Element/colgroup" title="The HTML &lt;colgroup&gt; Element (or HTML Table Column Group Element) defines a group of columns within a table."><code>&lt;colgroup&gt;</code></a> correspondants.</td>
    </tr>
    <tr>
     <td><code>table-footer-group</code></td>
     <td>Ces éléments se comportent comme des éléments HTML <a href="/fr/docs/Web/HTML/Element/tfoot" title="The HTML Table Foot Element (&lt;tfoot&gt;) defines a set of rows summarizing the columns of the table."><code>&lt;tfoot&gt;</code></a> correspondants.</td>
    </tr>
    <tr>
     <td><code>table-header-group</code></td>
     <td>Ces éléments se comportent comme des éléments HTML <a href="/fr/docs/Web/HTML/Element/thead" title="The HTML Table Head Element (&lt;thead&gt;) defines a set of rows defining the head of the columns of the table."><code>&lt;thead&gt;</code></a> correspondants.</td>
    </tr>
    <tr>
     <td><code>table-row</code></td>
     <td>Se comporte comme l'élément HTML <a href="/fr/docs/Web/HTML/Element/tr" title="The HTML Table Row Element (&lt;tr&gt;) defines a row of cells in a table. Those can be a mix of &lt;td&gt; and &lt;th&gt; elements."><code>&lt;tr&gt;</code></a>.</td>
    </tr>
    <tr>
     <td><code>table-row-group</code></td>
     <td>Ces éléments se comportent comme des éléments HTML <a href="/fr/docs/Web/HTML/Element/tbody" title="The HTML Table Body Element (&lt;tbody&gt;) defines a set of rows defining the body of the table. Though not mandatory, as the rows of the body can be defined as &lt;tr&gt; elements children of the parent &lt;table&gt; element, if present, all &lt;tr&gt; elements part of the body must be included into a &lt;tbody&gt; element."><code>&lt;tbody&gt;</code></a> correspondants.</td>
    </tr>
    <tr>
     <td colspan="1" rowspan="2">Valeurs du modèle de boîte flexible (CSS3)</td>
     <td><code>flex</code></td>
     <td>L'élément se comporte comme un bloc et dispose son contenu selon le modèle des boîtes flexibles.</td>
    </tr>
    <tr>
     <td><code>inline-flex</code></td>
     <td>L'élément se comporte comme un élément en-ligne et dispose son contenu selon le modèle des boîtes flexibles.</td>
    </tr>
    <tr>
     <td colspan="1" rowspan="2">Valeurs du modèle de boîte <em>Grid</em> (CSS3) {{experimental_inline}}</td>
     <td><code>grid</code></td>
     <td>
      <p>L'élément se comporte comme un bloc et dispose son contenu selon le modèle de boîte <em>Grid</em>.</p>
      <div class="note">
       Cette valeur étant expérimentale, <a href="#
Compatibilit.C3.A9_des_navigateurs" title="https://developer.mozilla.org/en/CSS/display#Browser_Compatibility">la plupart des navigateurs ne la supportent pas</a>. Noter particulièrement que la valeur <code>-moz-grid</code> n'est pas la version préfixée de cette valeur, mais un <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10">modèle d'affichage XUL</a> qui ne doit pas être utilisé sur un site internet.</div>
     </td>
    </tr>
    <tr>
     <td><code>inline-grid</code></td>
     <td>L'élément se comporte comme un élément en-ligne et dispose son contenu selon le modèle de boîte <em>Grid</em>.</td>
    </tr>
    <tr>
     <td>Valeurs expérimentales {{experimental_inline}}</td>
     <td><code>run-in</code></td>
     <td>
      <ul>
       <li>Si la boîte run-in contient un élément bloc, comme block.</li>
       <li>Si un élément bloc suit la boîte run-in, la boîte run-in devient la première boîte en-ligne de l'élément bloc.</li>
       <li>Si une boîte en-ligne suit, la boîte run-in devient un élément bloc.</li>
      </ul>
     </td>
    </tr>
   </tbody>
  </table>
 </dd>
</dl>
<h2 id="Exemples" name="Exemples">Exemples</h2>
<p>{{ CSSRefExampleLink("display") }}</p>
<pre class="brush: css">
p.secret&nbsp; { display: none }
&lt;p style="display:none"&gt; invisible text &lt;/p&gt;</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<ul>
 <li>Conformité CSS1&nbsp;: les navigateurs doivent tout à fait ignorer la propriété <code>display</code> et utiliser à la place les paramètres par défaut du navigateur pour chaque élément.</li>
 <li>Dans CSS1, la valeur par défaut pour cette propriété était <code>block</code>. Dans CSS2 elle a été changée pour <code>inline</code>.</li>
</ul>
<h5 id=".C3.89l.C3.A9ments_.C2.AB_bloc_.C2.BB_et_.C3.A9l.C3.A9ments_.C2.AB_en-ligne_.C2.BB" name=".C3.89l.C3.A9ments_.C2.AB_bloc_.C2.BB_et_.C3.A9l.C3.A9ments_.C2.AB_en-ligne_.C2.BB">Éléments «&nbsp;bloc&nbsp;» et éléments «&nbsp;en-ligne&nbsp;»</h5>
<ul>
 <li>Les <b>éléments de type bloc</b> créent des blocs de contenu verticalement distincts (dans le contexte visuel), généralement en utilisant des retours à la ligne avant et après le contenu. Seule cette valeur de <code>display</code> permet de générer des éléments positionnés. Le comportement de type bloc est illustré par des éléments HTML tels que <code>blockquote</code>, <code>div</code> ou encore les titres <code><strong>h</strong><sub>x</sub></code>. Les valeurs de la propriété <code>display</code> créant un élément de type bloc sont&nbsp;: <code>block</code>, <code>list-item</code>, <code>table</code>, <code>compact</code> et <code>run-in</code>.</li>
 <li>Les <b>éléments de type en-ligne</b> ne créent pas de blocs distincts de contenu et le contenu de l'élément est rendu à l'aide d'une boîte ligne (le contenu est distribué ligne par ligne dans l'élément bloc, physique ou virtuel, le contenant). Le comportement de type en-ligne est illustré par des éléments HTML tels que le formatage physique et virtuel des caractères, les images non flottantes et les contenus non balisés. Les valeurs de la propriété <code>display</code> créant un élément de type en-ligne sont&nbsp;: <code>inline</code>, <code>inline-table</code>, <code>compact</code> et <code>run-in</code>.</li>
</ul>
<h2 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</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><a class="external" href="http://dev.w3.org/csswg/css3-box/#display" lang="en" title="The definition of 'display' in that specification.">CSS Basic Box Model</a></td>
   <td><span class="spec-WD">Working Draft</span></td>
   <td>Ajout de la valeur <code>run-in</code>.</td>
  </tr>
  <tr>
   <td><a class="external" href="http://dev.w3.org/csswg/css3-grid-layout/#grid-declaration0" lang="en" title="The definition of 'display' in that specification.">CSS Grid Layout</a></td>
   <td><span class="spec-WD">Working Draft</span></td>
   <td>Ajout des valeur du modèle de boîte <em>Grid</em>.</td>
  </tr>
  <tr>
   <td><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-containers" lang="en" title="The definition of 'display' in that specification.">CSS Flexible Box Layout Module</a></td>
   <td><span class="spec-CR">Candidate Recommendation</span></td>
   <td>Ajout des valeur du modèle de boîte flexible.</td>
  </tr>
  <tr>
   <td><a class="external" href="http://www.w3.org/TR/CSS2/visuren.html#display-prop" lang="en" title="The definition of 'display' in that specification.">CSS Level 2 (Revision 1)</a></td>
   <td><span class="spec-REC">Recommendation</span></td>
   <td>Ajout de <code>inline-block</code> et des valeurs du modèle de table.</td>
  </tr>
  <tr>
   <td><a class="external" href="http://www.w3.org/TR/CSS1/#display" lang="en" title="The definition of 'display' in that specification.">CSS Level 1</a></td>
   <td><span class="spec-REC">Recommendation</span></td>
   <td>Valeurs basiques : <code>none</code>, <code>block</code>, <code>inline</code>, et <code>list-item</code>.</td>
  </tr>
 </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Fonction</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td><code>none</code>, <code>inline</code> et <code>block</code></td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>4.0</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>inline-block</code></td>
    <td>1.0</td>
    <td>3.0 (1.9)</td>
    <td>5.5 (-7.0)<br />
     seulement les éléments naturellement en-ligne</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>list-item</code></td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>6.0</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td>
    <td>1.0<br />
     Pas avant les éléments en-ligne</td>
    <td rowspan="2">{{CompatNo}}</td>
    <td rowspan="2">8.0</td>
    <td rowspan="2">7.0</td>
    <td>1.0 (85)<br />
     Pas avant les éléments en-ligne</td>
   </tr>
   <tr>
    <td>
     <p>4.0</p>
     <p>Supprimé en version 32</p>
    </td>
    <td>5.0 (532.5)</td>
   </tr>
   <tr>
    <td><code>inline-table</code></td>
    <td>1.0</td>
    <td>3.0 (1.9)</td>
    <td>8.0</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-colgroup</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, et <code>table-caption</code></td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>8.0</td>
    <td>7.0</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td><code>flex</code></td>
    <td>21.0{{property_prefix("-webkit")}}</td>
    <td>{{CompatGeckoDesktop("18.0")}}(behind a pref) <sup><a href="#bc1">[1]</a></sup></td>
    <td>{{CompatNo}}</td>
    <td>12.50</td>
    <td>{{CompatNo}}</td>
   </tr>
   <tr>
    <td><code>inline-flex</code></td>
    <td>21.0{{property_prefix("-webkit")}}</td>
    <td>{{CompatGeckoDesktop("18.0")}}(behind a pref) <sup><a href="#bc1">[1]</a></sup></td>
    <td>{{CompatNo}}</td>
    <td>12.50</td>
    <td>{{CompatNo}}</td>
   </tr>
   <tr>
    <td><code>grid</code> {{experimental_inline}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
    <td>10.0{{property_prefix("-ms")}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
   <tr>
    <td><code>inline-grid</code> {{experimental_inline}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatNo}}</td>
    <td>10.0{{property_prefix("-ms")}}</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>Android</th>
    <th>Firefox Mobile (Gecko)</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>
<p><sup><a name="bc1">[1]</a></sup> Pour activer le support des boîtes flexibles dans Firefox 18 et 19, l'utilisateur doit passer la préférence about:config "layout.css.flexbox.enabled" à <code>true</code>. Les boîtes flexibles multilignes sont supportées depuis Firefox 28.</p>
<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h2>
<p>{{ Cssxref("visibility") }}, {{ Cssxref("position") }}, {{ Cssxref("float") }}</p>
Revenir à cette révision