css3 flex alignment when one of element is 2 times higher that other element

Question

I have following code: I use flex box What I try done is remove the unnecessary space between third and second row(the eights element is 2 times higher that other element,The eights element should have 4th element on top, 7th and 11th element on left , 15 element on bottom).

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  width:900px;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  flex-direction: row;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-item-double {
  height:400px;
 
}

<ul class="flex-container">
  <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 flex-item-double">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
  <li class="flex-item">11</li>
   <li class="flex-item">12</li>
  <li class="flex-item">13</li>
  <li class="flex-item">14</li>
  <li class="flex-item">15</li>
</ul>

flexbox can't be used as a 'grid system'... I think that is what you are trying for... — kukkuz, Sep 27 '16 at 09:46
I overwork this like http://codepen.io/dodekx/pen/NRwAEy (add div wrapper) — Dominik Kajzar, Oct 11 '16 at 15:07

score 0 · Answer 1 · answered Sep 27 '16 at 09:55

you should to change height to min-height

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  width:900px;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  flex-direction: row;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  min-height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-item-double {
  min-height:400px;
 
}

<ul class="flex-container">
  <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 flex-item-double">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10</li>
  <li class="flex-item">11</li>
   <li class="flex-item">12</li>
  <li class="flex-item">13</li>
  <li class="flex-item">14</li>
  <li class="flex-item">15</li>
</ul>

but in this case the 5th,6th, 7th and 8th element have the same height, but only 8 element should has 2X height — Dominik Kajzar, Sep 27 '16 at 10:06

css3 flex alignment when one of element is 2 times higher that other element

1 Answers1