css - columnas - Flexbox de columna anidada dentro de flexbox de fila con envoltura
flexbox html (2)
Tengo una página con cuadros flexibles anidados aquí: http://jsfiddle.net/fr0/6dqLh30d/
<div class="flex-group">
<ul class="flex-container red">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
</ul>
<ul class="flex-container gold">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container blue">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>
<div>
Y el (relevante) CSS:
.flex-group {
display: flex;
flex-direction: row;
height: 500px;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 0 0 auto;
}
.flex-item {
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
El flexbox externo ( .flex-group ) está diseñado para desplegarse de izquierda a derecha. Las flexboxes internas ( .flex-container ) están diseñadas para que se distribuyan de arriba a abajo, y se deben ajustar si no hay suficiente espacio (que no está en mi jsfiddle). Lo que quiero que suceda, es que los .flex-container crecerán en la dirección X cuando ocurra la envoltura. Pero eso no está ocurriendo. En cambio, los contenedores se desbordan.
Cómo quiero que se vea (en Chrome): https://dl.dropboxusercontent.com/u/57880242/flex-good.png
¿Hay alguna manera de hacer que los .flex-container s .flex-container tamaño adecuado en la dirección X? No quiero codificar sus anchuras, ya que los elementos que aparecen en estas listas serán dinámicos.
He estado jugando con esto durante unos minutos, y creo que tengo lo que estás buscando.
Aquí está el CSS
.flex-group {
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-container {
flex: 0 1 auto;
display: flex;
flex-flow: row wrap;
align-items: space-around;
align-content: flex-start;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
.red li {
background: red;
}
.gold li {
background: gold;
}
.blue li {
background: deepskyblue;
}
.flex-item {
flex: 0 1 auto;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
Y aquí hay un violín actualizado para verlo en acción.
Interesante, yo también jugueteo con eso. Le he dado al flex-container una flexión: 1 100%; Esto espacia uniformemente los contenedores al 100%; Los bloques fluirán en su propio espacio de contenedores y los contenedores tendrán la misma altura y peso sin importar el tamaño de la ventana.
.flex-container {
flex: 0 100%;
display: flex;
flex-flow: row wrap;
align-items: space-around;
align-content: flex-start;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}