[css] Diferencia entre pantalla: en línea-flex y pantalla: flex


Answers

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.

Question

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; */
}
<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>

Ejemplo JSFiddle

¿Cuál es la diferencia?




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.




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.




Related