Ten en cuenta que en las ciencias informáticas un problema suele tener varias soluciones, de igual modo mostramos lo más óptimo y mejor.
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 elementos flexibles; El diseño flexible es idéntico ya sea que el contenedor flexible esté a nivel de bloque o en línea. En particular, los elementos flexibles siempre se comportan como cajas a nivel de bloque (aunque tienen algunos propiedades de los bloques en línea). No puede mostrar elementos flexibles en línea; de lo contrario, en realidad no tienes un diseño flexible.
No está claro qué quiere decir exactamente con “alinear verticalmente” o por qué exactamente quiere 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ás considerando Flexbox en primer lugar).
1Las diferencias entre el diseño de bloques 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 extienden horizontalmente para llenar el bloque que los contiene, mientras que los cuadros de nivel en línea se reducen para adaptarse 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.
OK, sé que al principio puede ser un poco confuso, pero display está hablando del elemento padre, por lo que significa cuando decimos: display: flex;se trata del elemento y cuando decimos display:inline-flex;también está haciendo que el elemento en sí inline…
es como hacer un diven línea o cuadraejecute el fragmento a continuación y podrá ver cómo display flex se desglosa en la siguiente línea:
.inline-flex
display: inline-flex;
.flex
display: flex;
p
color: red;
Display Inline Flex
header
main
header
main
Display Flex
header
main
header
main
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 elementos secundarios 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.
Sección de Reseñas y Valoraciones
Recuerda algo, que tienes la capacidad de decir .