css display - Diferencia entre pantalla: inline-flex y pantalla: flex





flexbox generator (6)


flex y inline-flex aplican diseño flex 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.

Tengo dificultad para entender la display:inline-flex; propiedades display:inline-flex; . ¿Cuál es la diferencia entre la display:inline-flex; y display:flex; ?

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

Pero no hay diferencia en la presentación. Esperaba que todo en la identificación del contenedor se mostrara 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 de JSFiddle

¿Cuál es la diferencia?




Bien, al principio sé que puede ser un poco confuso, pero la 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 el propio elemento en inline ...

Es como hacer un div línea o bloque , ejecute el fragmento de código a continuación y puede ver cómo la display flex divide 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 crea rápidamente la imagen a continuación para mostrar la diferencia de un vistazo:




Pantalla: flex aplique el diseño flexible a los elementos flexibles o solo a los niños del contenedor. Por lo tanto, el contenedor en sí 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 aplique el diseño flexible a los elementos flexibles oa los niños, así como al propio contenedor. Como resultado, el contenedor se comporta como un elemento flexible en línea como lo hacen los niños y, por lo tanto, ocupa el ancho requerido por sus elementos / hijos únicamente y no todo el ancho de la pantalla.

Esto causa dos o más contenedores flexibles uno tras otro, mostrados como en línea-flex, se alinean uno al lado del otro en la pantalla hasta que se toma todo el ancho de la pantalla.




Necesitas un poco más de información para que el navegador sepa lo que quieres. Por ejemplo, a los niños del contenedor se les debe decir "cómo" flexionarse.

Violín actualizado

He añadido #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } a su CSS y se cambió inline-flex a flex , y puede ver cómo los elementos ahora se separan uniformemente en la página.




La diferencia entre "flex" y "inline-flex"

Respuesta corta:

Uno está en línea y el otro responde básicamente 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 hijos, tengan propiedades de flexión mientras permanece 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 a "inline-block".

Flex: el contenedor y sus hijos tienen propiedades flex, pero el contenedor reserva la fila, ya que se saca 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 un estilo excesivo.

El problema que puede tener

Debido a los elementos que enumeró en su ejemplo, aunque estoy adivinando, creo que desea utilizar flex para mostrar los elementos enumerados en una fila por fila, pero continúe viendo los elementos de lado a lado.

La razón por la que es probable que tenga problemas es porque flex y inline-flex tienen la propiedad predeterminada "flex-direction" establecida en "fila". Esto mostrará a los niños de lado a lado. Cambiar esta propiedad a "columna" permitirá que sus elementos se apilen y reserven espacio (ancho) igual al ancho de su padre.

A continuación, se incluyen algunos ejemplos para mostrar cómo funcionan los elementos 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;

Fiddle

display: flex; flex-direction: row;

Fiddle

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

Fiddle

display: flex; flex-direction: column;

Fiddle

display: inline;

Fiddle

display: block

Fiddle

Además, un excelente documento de referencia: una guía completa para Flexbox - trucos css




Siempre recuerdo lo que es flotar recordando el <img align="left" /> que actúa de manera muy similar a float:left . Básicamente, flota, flota la imagen a la izquierda y envuelve el texto u otro contenido a su alrededor. Sin float se mostraría como una pieza de texto.

Float funciona de manera similar a otras herramientas de documentos donde puede hacer que el texto se ajuste alrededor de la imagen (o elemento HTML).





css css3 flexbox