css - flexbox guia
¿Cuál es la diferencia entre display: inline-flex y display: flex? (6)
Necesita un poco más de información para que el navegador sepa lo que quiere. Por ejemplo, los hijos del contenedor necesitan que se les diga "cómo" flexionar.
He agregado
#wrapper > * { flex: 1; margin: auto; }
#wrapper > * { flex: 1; margin: auto; }
#wrapper > * { flex: 1; margin: auto; }
a su CSS y cambió
inline-flex
a
flex
, y puede ver cómo los elementos ahora se espacian uniformemente en la página.
Estoy tratando de alinear verticalmente elementos dentro de un contenedor de ID.
Di la
display:inline-flex;
la propiedad
display:inline-flex;
a esta ID ya que 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 mostrara en
inline
.
¿Por qué no lo es?
#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>
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 esté en
inline
...
Es como hacer un
div
línea
o
bloquear
, ejecutar el fragmento a continuación y puede ver cómo se
display flex
la
display flex
a 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:
display: inline-flex
no hace que
los elementos flex se
muestren en línea.
Hace que el
contenedor flexible se
muestre 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: 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 de nivel en línea. En particular, los elementos flexibles 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, en realidad no tiene 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 es simplemente un diseño en línea antiguo (
display: inline
y / o
display: inline-block
), para el cual flexbox
no
es un reemplazo;
Flexbox
no
es la solución de diseño universal que todos afirman que es (estoy afirmando 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 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 su bloque contenedor, mientras que los cuadros de nivel en línea se encogen para adaptarse a su contenido.
De hecho, es solo por esta razón que casi nunca usará
display: inline-flex
menos que tenga una muy buena razón para mostrar su contenedor flex en línea.
flex
e
inline-flex
aplican el diseño flex a los elementos secundarios 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 de flexión 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 eran lo suficientemente pequeños, sin ningún exceso de estilo para permitir que existan en la misma fila. Esto es bastante similar a "bloque en línea".
Flex: el contenedor y sus elementos secundarios tienen propiedades de flexión, pero el contenedor reserva la fila, ya que se elimina del flujo normal del documento. Responde como un elemento de bloque, en términos de flujo de documentos. Dos contenedores flexbox no podrían existir en la misma fila sin un estilo excesivo.
El problema que puedes tener
Debido a los elementos que enumeró en su ejemplo, aunque supongo, creo que desea usar flex para mostrar los elementos enumerados de manera uniforme fila por fila, pero continúe viendo los elementos uno al lado del otro.
La razón por la que probablemente tenga problemas es porque flex e inline-flex tienen la propiedad predeterminada "flex-direction" establecida en "row". Esto mostrará a 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 padre.
A continuación hay 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 inline vs block ...
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
Además, un gran documento de referencia: una guía completa de Flexbox - trucos css
Pantalla: flex aplica el diseño flexible a los elementos flexibles o hijos del contenedor solamente. Entonces, el contenedor en sí mismo permanece 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 hijos, así como al contenedor en sí. Como resultado, el contenedor se comporta como un elemento flexible en línea al igual que los elementos secundarios y, por lo tanto, ocupa el ancho requerido solo por sus elementos / elementos secundarios y no todo el ancho de la pantalla.
Esto hace que dos o más contenedores flexibles uno tras otro, que se muestran como flexión en línea, se alineen uno al lado del otro en la pantalla hasta que se tome todo el ancho de la pantalla.