Différence entre display:inline-flex et display:flex
j'ai de la difficulté à comprendre la propriété display:inline-flex; .
Quelle est la différence entre display:inline-flex; et display:flex; ?
j'essaie d'aligner verticalement certains éléments dans le paquet ID. C'est pourquoi j'ai donné la propriété display:inline-flex; à cet ID; parce que L'emballage ID est le conteneur flex.
mais il n'y a pas de différence de présentation. Je m'attendais à ce que tout ce qui était dans l'identifiant de l'emballage soit affiché inline .
css lang-css prettyprint-override">#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>JSFiddle Exemple
Quelle est la différence?
6 réponses
il n'est pas clair ce que vous entendez exactement par "aligner verticalement" ou pourquoi exactement vous voulez afficher le contenu en ligne, mais je soupçonne que flexbox est pas le bon outil pour ce que vous essayez d'accomplir. Il y a de fortes Chances que ce que vous recherchez ne soit qu'une simple mise en page en ligne ( display: inline et/ou display: inline-block ), pour laquelle flexbox est et non un remplacement; flexbox est et / ou 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 flexbox en premier lieu).
1 les différences entre la mise en page par blocs et la mise en page en ligne sortent du cadre de cette question, mais celle qui se démarque le plus est la largeur automatique: les boîtes à niveau de blocs s'étirent horizontalement pour remplir leur bloc contenant, tandis que les boîtes à niveau en ligne rétrécissent pour s'adapter à leur contenu. En fait, c'est pour cette seule raison que vous n'utiliserez presque jamais display: inline-flex à moins que vous ayez une très bonne raison d'afficher votre container flex en ligne.
flex et inline-flex s'appliquent aux enfants du conteneur. Conteneur avec display:flex se comporte comme un élément de niveau de bloc lui-même, tandis que display:inline-flex rend le conteneur se comporte comme un élément en ligne.
la différence entre "flex" et "inline-flex "
brève réponse:
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).
plus longue réponse:
Inline-Flex - la version inline de flex permet à l'élément, et à ses enfants, d'avoir des propriétés flex tandis que toujours dans le flux régulier du document/de la page web. Fondamentalement, vous pouvez placer deux inline conteneurs flex dans la même ligne, si les largeurs étaient assez petites, sans excès de style 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 rangée, car il est retiré 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 rangée sans Style excessif.
le problème que vous pourriez avoir
en raison des éléments que vous avez énumérés dans votre exemple, bien que je devine, Je pense que vous voulez utiliser flex pour afficher les éléments énumérés dans une même ligne par ligne, mais continuer à voir les éléments côte à côte.
la raison pour laquelle vous avez probablement des problèmes est parce que flex et inline-flex a la propriété par défaut "flex-direction" définie à "row."Ceci affichera les enfants côte à côte. Changer cette propriété en "colonne" permettra à vos éléments de empiler et réserver l'espace(largeur) égale à la largeur de son parent.
ci-dessous sont quelques exemples pour montrer comment flex vs inline-flex fonctionne et aussi une démonstration rapide de la façon dont les éléments en ligne vs bloc fonctionnent...
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
aussi, une grande référence doc: Un Guide Complet pour Flexbox - css astuces
OK, je sais que d'abord ça peut être un peu confus, mais display parle de l'élément parent, donc ça veut dire 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 un div inline ou bloc , exécuter l'extrait 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>aussi créer rapidement l'image ci-dessous pour montrer la différence en un coup d'oeil:
Display:flex appliquer flex mise en page à la flexion des éléments ou des enfants du conteneur. Ainsi, le conteneur lui-même reste un élément de niveau bloc et prend ainsi toute la largeur de l'écran.
Cela provoque chaque conteneur flex pour passer à une nouvelle ligne sur l'écran.
Display:inline-flex appliquer flex mise en page à la flexion des éléments ou des enfants ainsi que pour le conteneur lui-même. En conséquence, la container se comporte comme un élément flex en ligne comme les enfants le font et prend donc la largeur requise par ses articles/enfants seulement et non la largeur entière de l'écran.
cela provoque deux ou plusieurs conteneurs flex l'un après l'autre, affichés comme inline-flex, s'alignent côte à côte sur l'écran jusqu'à ce que toute la largeur de l'écran est prise.
Vous avez besoin d'un peu plus d'informations pour que le navigateur sait ce que vous voulez. Par exemple, il faut dire aux enfants du conteneur "comment" fléchir.
j'ai ajouté #wrapper > * { flex: 1; margin: auto; } à votre CSS et changé inline-flex en flex , et vous pouvez voir comment les éléments s'espacent maintenant uniformément sur la page.