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

331

Estoy tratando de alinear verticalmente elementos dentro de un contenedor de ID. Le di 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 se mostrara todo en la identificación del contenedor 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>

Expandir fragmento

css flexbox astridx
fuente

407

display: inline-flexno hace que los elementos flexibles se muestren en línea. Hace que el contenedor flexible se muestre en línea. Esa es la única diferencia entre display: inline-flexy display: flex. Se puede hacer una comparación similar entre display: inline-blocky display: block, y prácticamente cualquier otro tipo de pantalla que tenga una contraparte en línea . ¹

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 desea mostrar los contenidos 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: inliney / o display: inline-block), para el que 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).

¹ _{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á a display: inline-flexmenos que tenga una muy buena razón para mostrar su contenedor flexible en línea.}

BoltClock
fuente

14

Demo de violín mejorada para diferenciar inline-flexy flex: jsfiddle.net/mgr0en3q/1 Violín original de @ fish-graphics y @astridx

Kevin Law

Respuesta absolutamente útil. Me confundí la primera vez. Cuando aplico el flex en línea, el elemento flex no cambia cuando lo aplico con flex de pantalla también. En realidad, se aplica en el contenedor flexible :)

Faris Rayhan

68

OK, sé que al principio puede ser un poco confuso, pero displayestá 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 elemento en sí inline...

Es como hacer una div línea o bloque , ejecute el siguiente fragmento y se puede ver cómo display flexse descompone 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>

Expandir fragmento

También cree rápidamente la imagen a continuación para mostrar la diferencia de un vistazo:

Alireza
fuente

3

¿Qué estás usando para esta foto? Esta fuente es muy bonita.

shu

55

Hay un pequeño error tipográfico en la imagen de arriba. "display: flex-inline" debe ser "display: inline-flex" similar a "inline-block", etc.

AlienKevin

62

flexy inline-flexambos aplican diseño flexible a los hijos del contenedor. El contenedor con se display:flexcomporta como un elemento de nivel de bloque, mientras que display:inline-flexhace que el contenedor se comporte como un elemento en línea.

León
fuente

29

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 diferencias propias).

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 estilo excesivo 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 se presentan 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;

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

fuente

15

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.

Noor Jahan Mukammel
fuente

1

"aplicar diseño flexible [...] al contenedor" [cita requerida]

BoltClock

1

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

Agregué #wrapper > * { flex: 1; margin: auto; }a tu CSS y cambié inline-flexa flex, y puedes ver cómo los elementos ahora se espacian uniformemente en la página.

GRÁFICOS FÍSICOS
fuente

2

Gracias por su respuesta, pero sabía que podía hacerlo de esta manera. Solo entendí mal la visualización de la propiedad: inline-flex; - Pensé que esta propiedad es una forma más fácil de lograr mi objetivo. Pero entre los últimos días aprendí que esta propiedad solo hace que el contenedor se muestre en línea. Con un fondo agregado, veo ahora la diferencia entre la visualización de propiedades: inline-flex; y pantalla: flex; en un flexbox jsfiddle.net/vUSmV/101

astridx

-1

Abrir en página completa para una mejor comprensión

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}

<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>

Expandir fragmento

Pawan Gangwani
fuente

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

Respuestas: