Quelle est la différence entre display: inline-flex et display: flex?
J'essaie d'aligner verticalement des éléments dans une enveloppe d'identification. J'ai donné la propriété display:inline-flex; à cet ID car le wrapper d'ID est le conteneur flex.
Mais il n'y a pas de différence dans la présentation. Je m'attendais à ce que tout l'ID d'encapsuleur soit affiché inlinename__. 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>display: inline-flex ne rend pas les éléments flexibles affichés en ligne. Cela rend le conteneur flex affiché en ligne. C'est la seule différence entre display: inline-flex et display: flex. Une comparaison similaire peut être faite entre display: inline-block et display: block, et à peu près tout autre type d'affichage ayant une contrepartie en ligne .1
Il n'y a absolument aucune différence dans l'effet sur les articles flexibles; flex layout est identique, que le conteneur flex soit au niveau du bloc ou au niveau de la ligne. En particulier, les éléments flex se comportent toujours comme des boîtes de niveau bloc (bien qu’ils aient des propriétés de blocs en ligne). Vous ne pouvez pas afficher les éléments flex inline; sinon, vous n'avez pas réellement de mise en page flexible.
Vous ne savez pas exactement ce que vous entendez par "aligner verticalement" ni pourquoi vous souhaitez 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 est fort probable que ce que vous cherchez soit simplement une ancienne disposition en ligne (display: inline et/ou display: inline-block), pour laquelle flexbox est et non un remplacement; flexbox est pas la solution de mise en page universelle que tout le monde prétend être (je dis cela parce que l'idée fausse est probablement la raison pour laquelle vous envisagez d'utiliser flexbox dans la première endroit).
1Les différences entre la disposition en bloc et la disposition en ligne sortent du 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 le bloc qui les contient, tandis que les boîtes au niveau en ligne se réduisent à leur contenu. . En fait, c'est pour cette seule raison que vous n'utiliserez presque jamais display: inline-flex à moins que vous n'ayez une très bonne raison d'afficher votre conteneur flex en ligne.
flex et inline-flex appliquent tous deux la disposition flexible aux enfants du conteneur. Le conteneur avec display:flex se comporte comme un élément de niveau bloc, alors que display:inline-flex fait en sorte que le conteneur se comporte comme un élément en ligne.
D'accord, je sais qu'au début, cela risque d'être un peu déroutant, mais display parle de l'élément parent. Cela signifie donc que lorsque nous disons: display: flex;, il s'agit de l'élément et lorsque nous disons display:inline-flex;, rend également l'élément lui-même inline...
C'est comme faire un div inline ou bloquer , lancez l'extrait de code ci-dessous et vous pouvez voir comment display flex se 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>Également créer rapidement l'image ci-dessous pour montrer la différence en un coup d'œil:
La différence entre "flex" et "inline-flex"
Réponse courte:
L'un est en ligne et l'autre réagit essentiellement comme un élément de bloc (mais présente 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 de flex tout en restant dans le flux normal du document/de la page Web. Fondamentalement, vous pouvez placer deux conteneurs flexibles en ligne dans la même rangée, si les largeurs sont suffisamment petites, sans style supplémentaire pour leur permettre d'exister dans la même rangée. Ceci est assez similaire à "inline-block".
Flex - Le conteneur et ses enfants ont des propriétés de flexibilité, mais le conteneur réserve la ligne, car elle sort du flux normal du document. Il répond comme un élément de bloc, en termes de flux de documents. Deux conteneurs de boîtes flexibles ne pourraient pas exister sur la même rangée sans un style excessif.
Le problème que vous pouvez rencontrer
En raison des éléments que vous avez énumérés dans votre exemple, même si je devine, je pense que vous souhaitez utiliser flex pour afficher les éléments énumérés de manière uniforme ligne par ligne tout en continuant à afficher 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 de s'empiler et de réserver un espace (largeur) égal à la largeur de son parent.
Vous trouverez ci-dessous quelques exemples montrant le fonctionnement de flex vs inline-flex et une démonstration rapide du fonctionnement d’inline vs blocs ...
display: inline-flex; flex-direction: row;
display: flex; flex-direction: row;
display: inline-flex; flex-direction: column;
display: flex; flex-direction: column;
display: inline;
display: block
En outre, un excellent document de référence: n guide complet sur Flexbox - astuces css
Display: flex appliquer la disposition flex aux éléments flexibles 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.
Cela provoque le déplacement de chaque conteneur Flex vers une nouvelle ligne à l'écran.
Display: inline-flex appliquer une disposition flexible aux éléments flexibles ou enfants ainsi qu’au conteneur lui-même. En conséquence, le conteneur se comporte comme un élément de flexion en ligne, tout comme les enfants, et occupe ainsi la largeur requise par ses éléments/enfants uniquement, et non toute la largeur de l'écran.
Cela provoque deux ou plusieurs conteneurs flex, l'un après l'autre, affichés comme inline-flex, s'aligner côte à côte sur l'écran jusqu'à ce que toute la largeur de l'écran soit prise.
Vous avez besoin d'un peu plus d'informations pour que le navigateur sache ce que vous voulez. Par exemple, il faut dire aux enfants du conteneur "comment" faire preuve de souplesse.
J'ai ajouté #wrapper > * { flex: 1; margin: auto; } à votre code CSS et changé inline-flex en flex et vous pouvez voir comment les éléments se répartissent désormais de manière égale sur la page.