Align items with flexbox

Question

Align items with flexbox

Navigation

#1 by (0 votes)

0

I have a section on a website where I have to distribute several containers with flexbox, as shown in the image. However, I do not want the last row, when there are fewer containers than in the top rows, to focus. I need them to be aligned to the left and at the same time with their upper containers. Am I overlooking any property that allows me to do this? I tried with "flex-start", but that justifies all the containers on the left and I have to accommodate them with margins that do not keep the content well centered on certain screen dimensions.

css flexbox

asked by Rumplestiltskin 18.10.2017 в 20:35

source

1 answer

Problem getting selected values from checbox in Jtable Extract rows from a database

score 0 · Accepted Answer

to line up like this

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>