0

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. Distribución de los contenedores con los últimos centrados.

2
  • 2
    Por favor edita la pregunta y agrega el código correspondiente (HTML y CSS) como texto (no como imagen).
    – Shaz
    el 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
    – David
    el 20 oct. 2017 a las 16:34

1 respuesta 1

0

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.