examples - CSS flex, cómo mostrar un elemento en la primera línea y dos en la siguiente línea
flexbox grid (2)
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.
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.
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;