examples - CSS flex, cómo mostrar un elemento en la primera línea y dos en la siguiente línea

flexbox grid

Question

Esta es una pregunta bastante simple, supongo, pero no puedo obtener 3 elementos en el contenedor flexible para mostrar en 2 filas, uno en la primera fila y los otros 2 en la segunda fila. Este es el CSS para el contenedor flexible. Muestra los 3 elementos en una sola línea, obviamente :)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

Si flex-wrap está configurado para wrap , los 3 elementos se muestran en una columna. Pensé que la configuración de ajuste era necesaria para mostrar los elementos del contenedor en varias líneas. He intentado este CSS para el primer elemento contenedor, con la intención de que ocupe toda la primera fila, pero no funcionó

div.intro_item_1 {
  flex-grow: 3;
}

He seguido las instrucciones en "CSS-Tricks" pero realmente no estoy seguro de qué combinación de comandos usar. Cualquier ayuda sería muy bienvenida ya que estoy desconcertado por esto.

Answer 1

La respuesta dada por Nico O es correcta. Sin embargo, esto no obtiene el resultado deseado en Internet Explorer 10 a 11 y Firefox.

Para IE, encontré que cambiar

.flex > div
{
   flex: 1 0 50%;
}

a

.flex > div
{
   flex: 1 0 45%;
}

Parece funcionar. No me pregunten por qué, no he profundizado más en esto, pero podría tener algo que ver con cómo IE representa el cuadro de borde o algo así.

En el caso de Firefox lo resolví agregando

display: inline-block;

a los artículos.

Answer 2

Puedes hacer algo como esto:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}

<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

Aquí hay una demostración: http://jsfiddle.net/73574emn/1/

Este modelo se basa en el ajuste de línea después de que una "fila" está llena. Como configuramos la flex-basis del primer elemento en 100%, llena la primera fila por completo. Atención especial en la flex-wrap: wrap;