Solución:
display: inline-flex no hace artículos flexibles mostrar en línea. Hace que el contenedor flexible mostrar en línea. Esa es la única diferencia entre display: inline-flex y display: flex. Se puede hacer una comparación similar entre display: inline-block y display: blocky prácticamente cualquier otro tipo de pantalla que tenga una contraparte en línea.1
No hay absolutamente ninguna diferencia en el efecto sobre los artículos flexibles; El diseño flexible es idéntico ya sea que el contenedor flexible sea a nivel de bloque o en línea. En particular, los elementos flexibles en sí mismos siempre se comportan como cajas a nivel de bloque (aunque tienen algunos propiedades de bloques en línea). No puede mostrar elementos flexibles en línea; de lo contrario, no tiene un diseño flexible.
No está claro qué quiere decir exactamente con “alinear verticalmente” o por qué exactamente desea mostrar el contenido en línea, pero sospecho que flexbox no es la herramienta adecuada para lo que sea que esté tratando de lograr. Lo más probable es que lo que está buscando sea simplemente un diseño en línea antiguo (display: inline y / o display: inline-block), para el cual flexbox es no un reemplazo; flexbox es no la solución de diseño universal que todos afirman que es (lo digo porque la idea errónea es probablemente la razón por la que está considerando flexbox en primer lugar).
1 Las diferencias entre el diseño de bloque y el diseño en línea están fuera del alcance de esta pregunta, pero la que más se destaca es el ancho automático: los cuadros de nivel de bloque se estiran horizontalmente para llenar el bloque que los contiene, mientras que los cuadros de nivel de línea se encogen para ajustarse a su contenido . De hecho, es solo por esta razón que casi nunca usará display: inline-flex a menos que tenga una muy buena razón para mostrar su contenedor flexible en línea.
Bien, sé que al principio puede ser un poco confuso, pero display está hablando del elemento padre, es decir, cuando decimos: display: flex;, se trata del elemento y cuando decimos display:inline-flex;, también hace que el elemento en sí inline…
Es como hacer un div en línea o cuadra, ejecute el fragmento a continuación y verá cómo display flex se desglosa en la siguiente línea:
.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>También cree rápidamente la imagen a continuación para mostrar la diferencia de un vistazo:
flex y inline-flex ambos aplican el diseño flexible a los hijos del contenedor. Contenedor con display:flex se comporta como un elemento a nivel de bloque en sí mismo, mientras que display:inline-flex hace que el contenedor se comporte como un elemento en línea.