Tengo una sección en un sitio web en la que debo distribuir varios contenedores con flexbox, como se ve en la imagen. Sin embargo, no quiero que en la última fila, cuando haya menos contenedores que en las filas superiores, se centren. Necesito que queden alineados a la izquierda y a la vez con sus contenedores superiores.
¿Estoy pasando por alto alguna propiedad que me permita hacer esto?
He intentado con "flex-start", pero eso me justifica todos los contenedores a la izquierda y me toca acomodarlos con márgenes que no mantienen el contenido bien centrado en ciertas dimensiones de pantalla.
-
2Por favor edita la pregunta y agrega el código correspondiente (HTML y CSS) como texto (no como imagen).– Shazel 18 oct. 2017 a las 18:36
-
Has probado añadir un div con los 2 últimos elementos de hijos, y a ese div añadirle la propiedad space-around ? esta lo que hace es colocar en tu caso un elemento hijo a cada lado, pero añadiéndole un margen lateral para que no quede totalmente aproximado al borde. Recuerda que para usar space-around esta tiene que ser elemento hijo de un contendor padre con display: flex– Davidel 20 oct. 2017 a las 16:34
Añade un comentario
|
1 respuesta
para alinear asi
div{
box-sizing: border-box;
}
.container{
width: 100%; /*ancho del contenedor*/
background:silver;
display:flex;
display:-webkit-flex;
flex-wrap: wrap; /*generar rows*/
justify-content:flex-start; /*contenido a la izquierda*/
align-items: stretch; /*todos los elementos se igualan al mas alto*/
padding:0 -10px;
}
.element{
width:33.3%; /*dividido en 3*/
padding: 10px 10px;
}
.content{
background:yellow;
height:100%; /*usa el 100% del alto del elemento*/
}
<div class="container">
<div class="element"><div class="content">111111 11 1 11 1111 1 1 111 1 11 1 111 1 1 1 111111 </div></div>
<div class="element"><div class="content">2</div></div>
<div class="element"><div class="content">3</div></div>
<div class="element"><div class="content">4</div></div>
<div class="element"><div class="content">5</div></div>
<div class="element"><div class="content">66666 66666 6 666 666666 6 6 6 666666 6 666</div></div>
<div class="element"><div class="content">7</div></div>
<div class="element"><div class="content">8</div></div>
</div>