Diferencia entre pantalla: en línea-flex y pantalla: flex

Tengo dificultades para entender la display:inline-flex; la propiedad display:inline-flex; . Cuál es la diferencia entre display:inline-flex; y display:flex; ?

Estoy tratando de alinear verticalmente algunos elementos dentro del contenedor de ID. Es por eso que di la display:inline-flex; la propiedad display:inline-flex; a esta identificación; porque el contenedor de ID es el contenedor flexible.

Pero no hay diferencia en la presentación. Esperaba que todo en la Id. Del contenedor se mostraría en inline .

 #wrapper { display: inline-flex; /*no difference to display:flex; */ } 
  
header
main
footer

Ejemplo JSFiddle

¿Cuál es la diferencia?

display: inline-flex no hace que los elementos flexibles se muestren en línea. Hace que el contenedor flexible se visualice en línea. Esa es la única diferencia entre display: inline-flex y display: flex . Se puede hacer una comparación similar entre la display: inline-block y display: block , y 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 si el contenedor flexible es de nivel de bloque o en línea. En particular, los elementos flexibles en sí mismos siempre se comportan como cuadros de nivel de bloque (aunque tienen algunas propiedades de bloques en línea). No puede mostrar elementos flexibles en línea; de lo contrario, no tienes un diseño flexible.

No está claro qué es exactamente lo que quiere decir con “alineación vertical” o por qué exactamente desea mostrar los contenidos en línea, pero sospecho que flexbox no es la herramienta adecuada para lo que está tratando de lograr. Lo más probable es que lo que está buscando es simplemente un diseño en línea antiguo ( display: inline y / o display: inline-block ), para lo cual flexbox no es un reemplazo; Flexbox no es la solución de diseño universal que todo el mundo dice que es (estoy diciendo esto porque la idea errónea es probablemente la razón por la que estás considerando flexbox en primer lugar).


1 Las diferencias entre el diseño del bloque y el diseño en línea están fuera del scope de esta pregunta, pero la que más se destaca es el ancho automático: las cajas a nivel de bloque se estiran horizontalmente para llenar el bloque contenedor, mientras que las cajas a nivel se contraen para adaptarse a su contenido. De hecho, es por esta razón que casi nunca usará display: inline-flex menos que tenga una muy buena razón para mostrar su contenedor flexible en línea.

flex y inline-flex aplican diseño flexible a los niños del contenedor. Contenedor con display:flex comporta como un elemento de nivel de bloque, mientras que display:inline-flex hace que el contenedor se comporte como un elemento en línea.

La diferencia entre “flex” y “inline-flex”

Respuesta corta:

Uno está en línea y el otro básicamente responde como un elemento de bloque (pero tiene algunas de sus propias diferencias).

Respuesta más larga:

Inline-Flex: la versión en línea de flex permite que el elemento, y sus elementos secundarios, tengan propiedades flexibles mientras permanecen en el flujo regular del documento / página web. Básicamente, puede colocar dos contenedores flexibles en línea en la misma fila, si los anchos son lo suficientemente pequeños, sin ningún exceso de estilo para permitir que existan en la misma fila. Esto es bastante similar al “bloque en línea”.

Flex: el contenedor y sus hijos tienen propiedades flexibles, pero el contenedor reserva la fila, ya que se extrae del flujo normal del documento. Responde como un elemento de bloque, en términos de flujo de documentos. Dos contenedores de flexbox no podrían existir en la misma fila sin exceso de estilo.

El problema que puedes tener

Debido a los elementos que enumeró en su ejemplo, aunque supongo, creo que desea utilizar flex para mostrar los elementos enumerados de forma parecida, fila por fila, pero continuar viendo los elementos uno al lado del otro.

La razón por la que probablemente tenga problemas es porque flex y inline-flex tienen la propiedad predeterminada “flex-direction” establecida en “row”. Esto mostrará los niños uno al lado del otro. Cambiar esta propiedad a “columna” permitirá que sus elementos se apilen y reserven espacio (ancho) igual al ancho de su elemento primario.

A continuación se muestran algunos ejemplos para mostrar cómo funciona flex vs inline-flex y también una demostración rápida de cómo funcionan los elementos en línea vs bloque …

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

Violín

 display: flex; flex-direction: row; 

Violín

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

Violín

 display: flex; flex-direction: column; 

Violín

 display: inline; 

Violín

 display: block 

Violín

Además, un excelente documento de referencia: Una guía completa de Flexbox: trucos de CSS

OK, sé que al principio podría ser un poco confuso, pero la display está hablando sobre el elemento padre, entonces cuando decimos: display: flex; , se trata del elemento y cuando decimos display:inline-flex; , también está haciendo que el elemento en sí esté en inline

Es como crear un div línea o en bloque , ejecute el fragmento a continuación y podrá ver cómo se display flex en la siguiente línea:

 .inline-flex { display: inline-flex; } .flex { display: flex; } p { color: red; } 
  

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer

Pantalla: flex aplica el diseño de la flexión a los elementos flexibles o a los elementos secundarios del contenedor únicamente. Por lo tanto, el contenedor se mantiene como un elemento de nivel de bloque y, por lo tanto, ocupa todo el ancho de la pantalla.

Esto hace que cada contenedor flexible se mueva a una nueva línea en la pantalla.

Pantalla: inline-flex aplica el diseño flexible a los elementos flexibles o niños, así como al contenedor en sí. Como resultado, el contenedor se comporta como un elemento flex en línea al igual que los niños y, por lo tanto, ocupa el ancho requerido por sus elementos / niños solamente y no por todo el ancho de la pantalla.

Esto provoca que dos o más contenedores flexibles, uno detrás de otro, se muestren como en línea, se alineen uno al lado del otro en la pantalla hasta que se tome todo el ancho de la pantalla.

Necesita un poco más de información para que el navegador sepa lo que quiere. Por ejemplo, a los niños del contenedor se les debe decir “cómo” flexionar.

Fiddle actualizado

He agregado #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } a su CSS y cambiado inline-flex a flex , y puede ver cómo los elementos ahora se distribuyen de manera uniforme en la página.