css - guia - ¿Cuál es la diferencia entre display: inline-flex y display: flex?




flexbox html (4)

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>

JSFiddle Ejemplo


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.

Fiddle actualizado

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.


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:


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;

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 gran documento de referencia: una guía completa de Flexbox - trucos css







flexbox