Flex Box breaking into Columns

user_18250678 0
Viewed 124

I need help with my Flex Box Layout. It should break into two columns, with two divs each, the same time, the first smaller Box shifts down.

BTW: What is the correct syntax, to target Child 2 and 3 at once?

#container_left {
  height: 500px;
  /*height for testing*/
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
  flex-wrap: wrap;
}

.item_left {
  flex-basis: 200px;
  margin: 0.5%;
  width: 10%;
}

.item_left:nth-child(2) {
  flex-basis: 30%;
  flex-grow: 1;
}

.item_left:nth-child(3) {
  flex-basis: 30%;
  flex-grow: 1;
}


/*Either for testing*/

div {
  border: solid 1px;
}
<div id="container_left">
  <div class="item_left"></div>
  <div class="item_left"></div>
  <div class="item_left"></div>
  <div class="item_left"></div>
</div>

flexbox css
2 Answers

Try placing two divs in html for two columns and inside those , place two these four divs (two in each).It will be easier.

user_160496600

It seems you are trying to target the 2nd and 3rd child of #container-left, however, .item_left:nth-child(2) will target the 2nd child of elements with the item-left class. To target the nth element from #container-left, you will need to use #container-left:nth-child(2).

#container_left {
  height: 500px;
  /*height for testing*/
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
  flex-wrap: wrap;
}

.item_left {
  flex-basis: 200px;
  margin: 0.5%;
  width: 10%;
}

#container-left:nth-child(2) {
  flex-basis: 30%;
  flex-grow: 1;
}

#container-left:nth-child(3) {
  flex-basis: 30%;
  flex-grow: 1;
}


/*Either for testing*/

div {
  border: solid 1px;
}
user_12499940
Related