Quelle est la différence entre display: inline-flex et display: flex?

331

J'essaie d'aligner verticalement des éléments dans un wrapper ID. J'ai donné la propriété display:inline-flex;à cet ID car le wrapper d'ID est le conteneur flexible.

Mais il n'y a pas de différence de présentation. Je m'attendais à ce que tout dans l'ID wrapper soit affiché inline. Pourquoi pas?

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>
Développer l'extrait

css  flexbox 
— astridx
source

Réponses:

407

display: inline-flexne fait pas afficher les éléments flexibles en ligne. Il rend l' affichage du conteneur flexible en ligne. C'est la seule différence entre display: inline-flexet display: flex. Une comparaison similaire peut être faite entre display: inline-blocket display: block, et à peu près n'importe quel autre type d'affichage ayant un équivalent en ligne . 1

Il n'y a absolument aucune différence dans l'effet sur les articles flexibles; la disposition flexible est identique, que le conteneur flexible soit au niveau du bloc ou au niveau en ligne. En particulier, les éléments flex eux-mêmes se comportent toujours comme des boîtes de niveau bloc (bien qu'ils aient certaines propriétés de blocs en ligne). Vous ne pouvez pas afficher les éléments flexibles en ligne; sinon, vous n'avez pas de mise en page flexible.

On ne sait pas exactement ce que vous entendez par "aligner verticalement" ou pourquoi exactement vous voulez afficher le contenu en ligne, mais je soupçonne que flexbox n'est pas le bon outil pour tout ce que vous essayez d'accomplir. Il y a de fortes chances que ce que vous cherchez soit simplement une ancienne mise en page en ligne ( display: inlineet / ou display: inline-block), pour laquelle flexbox n'est pas un remplacement; flexbox n'est pas la solution de mise en page universelle que tout le monde prétend qu'elle est (je dis cela parce que l'idée fausse est probablement la raison pour laquelle vous envisagez la flexbox en premier lieu).

1 Les différences entre la disposition des blocs et la disposition en ligne n'entrent pas dans le cadre de cette question, mais celle qui se démarque le plus est la largeur automatique: les boîtes au niveau du bloc s'étirent horizontalement pour remplir leur bloc contenant, tandis que les boîtes au niveau en ligne se rétrécissent pour s'adapter à leur Contenu. En fait, c'est pour cette seule raison que vous n'utiliserez presque jamais display: inline-flexsauf si vous avez une très bonne raison d'afficher votre conteneur flexible en ligne.

— BoltClock
source
14
Démo de violon améliorée pour différencier inline-flexet flex: jsfiddle.net/mgr0en3q/1 Violon original par @ fish-graphics et @astridx
— Kevin Law
Réponse absolument utile. Je me suis perdu la première fois. Lorsque j'applique le flex en ligne, l'élément flexible ne change pas lorsque j'applique également avec le flex d'affichage. En fait, cela s'applique au conteneur flexible :)
— Faris Rayhan
68

D'accord, je sais que cela peut être un peu déroutant au début, mais displayparle de l'élément parent, donc signifie quand on dit:, display: flex;c'est à propos de l'élément et quand on dit display:inline-flex;, c'est aussi faire l'élément lui-même inline...

C'est comme faire une div ligne ou un bloc , exécutez l'extrait ci-dessous et vous pouvez voir comment display flexse décompose à la ligne suivante:

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}
<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>
Développer l'extrait

Créez également rapidement l'image ci-dessous pour montrer la différence en un coup d'œil:

affichage flex vs affichage inline-flex

— Alireza
source
3
Qu'utilisez-vous pour cette photo? Cette police est très agréable.
— shu
5
Il y a une petite faute de frappe sur l'image ci-dessus. "display: flex-inline" devrait être "display: inline-flex" similaire à "inline-block", etc.
— AlienKevin
62

flexet les inline-flexdeux appliquent une disposition flexible aux enfants du conteneur. Le conteneur avec display:flexse comporte comme un élément de niveau bloc lui-même, tandis que display:inline-flexle conteneur se comporte comme un élément en ligne.

— Leo
source
29

La différence entre "flex" et "inline-flex"

Réponse courte:

L'un est en ligne et l'autre répond essentiellement comme un élément de bloc (mais a certaines de ses propres différences).

Réponse plus longue:

Inline-Flex - La version en ligne de flex permet à l'élément, et à ses enfants, d'avoir des propriétés flex tout en restant dans le flux régulier du document / de la page Web. Fondamentalement, vous pouvez placer deux conteneurs flexibles en ligne dans la même ligne, si les largeurs étaient suffisamment petites, sans aucun style excessif pour leur permettre d'exister dans la même ligne. C'est assez similaire à "inline-block".

Flex - Le conteneur et ses enfants ont des propriétés flex mais le conteneur réserve la ligne, car elle est retirée du flux normal du document. Il répond comme un élément de bloc, en termes de flux de documents. Deux conteneurs flexbox ne pourraient pas exister sur la même ligne sans style excessif.

Le problème que vous rencontrez peut-être

En raison des éléments que vous avez répertoriés dans votre exemple, bien que je suppose, je pense que vous souhaitez utiliser flex pour afficher les éléments répertoriés de manière régulière, mais continuer à voir les éléments côte à côte.

La raison pour laquelle vous rencontrez probablement des problèmes est que flex et inline-flex ont la propriété par défaut "flex-direction" définie sur "row". Cela affichera les enfants côte à côte. Changer cette propriété en "colonne" permettra à vos éléments d'empiler et de réserver un espace (largeur) égal à la largeur de son parent.

Voici quelques exemples pour montrer comment fonctionne flex vs inline-flex et aussi une démo rapide du fonctionnement des éléments inline vs block ...

display: inline-flex; flex-direction: row;

Violon

display: flex; flex-direction: row;

Violon

display: inline-flex; flex-direction: column;

Violon

display: flex; flex-direction: column;

Violon

display: inline;

Violon

display: block

Violon

Aussi, un excellent document de référence: Un guide complet de Flexbox - astuces CSS

15

Affichage: flex applique la disposition flex aux éléments flex ou aux enfants du conteneur uniquement. Ainsi, le conteneur lui-même reste un élément de niveau bloc et occupe ainsi toute la largeur de l'écran.

Ainsi, chaque conteneur flexible se déplace vers une nouvelle ligne à l'écran.

Affichage: inline-flex applique une disposition flexible aux éléments flexibles ou aux enfants ainsi qu'au conteneur lui-même. En conséquence, le conteneur se comporte comme un élément flexible en ligne comme le font les enfants et prend donc la largeur requise par ses articles / enfants uniquement et non la largeur totale de l'écran.

Cela provoque deux ou plusieurs conteneurs flex l'un après l'autre, affichés en tant que flex en ligne, s'alignent côte à côte sur l'écran jusqu'à ce que toute la largeur de l'écran soit prise.

— Noor Jahan Mukammel
source
1
"appliquer la disposition flexible [...] au conteneur lui-même" [citation nécessaire]
— BoltClock
1

Vous avez besoin d'un peu plus d'informations pour que le navigateur sache ce que vous voulez. Par exemple, les enfants du conteneur doivent savoir "comment" fléchir.

Fiddle mis à jour

J'ai ajouté #wrapper > * { flex: 1; margin: auto; }à votre CSS et changé inline-flexen flex, et vous pouvez voir comment les éléments s'espacent maintenant uniformément sur la page.

— FiSH GRAPHICS
source
2
Merci pour votre réponse, mais je savais que je pouvais le faire de cette façon. J'ai seulement mal compris l'affichage de la propriété: inline-flex; - Je pensais que cette propriété est un moyen plus facile d'atteindre mon objectif. Mais entre les derniers jours, j'ai appris que cette propriété ne fait que l'affichage du conteneur en ligne. Avec un arrière-plan ajouté, je vois maintenant la différence entre l'affichage des propriétés: inline-flex; et affichage: flex; à un flexbox. jsfiddle.net/vUSmV/101
— astridx
-1

Ouvrir en pleine page pour une meilleure compréhension

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}
<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>
Développer l'extrait

— Pawan Gangwani
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.