Understanding flex boxes

Question

I'm trying to understand how to get my desired effect using flex box however I'm getting unpredictable results using percents and I can't understand why.

The goal is to have a square container with 3 square items as a "flex row". If I have a set container size - 500px x 500px, and my item height/width set to 50%, shouldn't I have a perfect square yellow box in the top left, square orange red next to it in the upper right, and then wouldn't the red box be pushed under the yellow one starting a new row? The idea is - as the window size gets smaller, the orange red would be pushed between the yellow and red like a column - but it would be 3 rows of 1

.container {
  margin-right: 3em;
  margin-left: 33m;
  display: flex;
  flex-direction: row;
  background-color: gray;
  height: 500px;
  width: 500px;
}
#item-1 {
  height: 50%;
  width: 50%;
  background-color: yellow;
}
#item-2 {
  height: 50%;
  width: 50%;
  background-color: orangered;
}
#item-3 {
  height: 50%;
  width: 50%;
  background-color: red;
}

<div class="container">
  <div class="item" id="item-1"></div>
  <div class="item" id="item-2">
    <div class="accordian"></div>
  </div>
  <div class="item" id="item-3"></div>
</div>

JSFiddle: https://jsfiddle.net/2o86nocc/2/#&togetherjs=JLLUCFSHMp

Przemysław Zalewski · Answer 1 · 2016-12-08T15:19:27.630

In order to wrap the red box to the next row, you have to enable Flexbox wrapping by setting the flex-wrap: wrap; on the container. It is not enabled by default.

See the edited fiddle here.

.container {
  margin-right: 3em;
  margin-left: 33m;
  display: flex;
  flex-direction: row;
  background-color: gray;
  height: 500px;
  width: 500px;

  flex-wrap: wrap;
}
#item-1 {
  height: 50%;
  width: 50%;
  background-color: yellow;
}
#item-2 {
  height: 50%;
  width: 50%;
  background-color: orangered;
}
#item-3 {
  height: 50%;
  width: 50%;
  background-color: red;
}

<div class="container">
  <div class="item" id="item-1"></div>
  <div class="item" id="item-2">
    <div class="accordian"></div>
  </div>
  <div class="item" id="item-3"></div>
</div>

Very True! Silly mistake on my part. I'm essentially trying to do whats here https://jsfiddle.net/2o86nocc/2/#&togetherjs=JLLUCFSHMp. However, I have images where the "options"are and setting the "accordion" width to 100% seems to be overriding its parents 50% width settings.... I'll have to try and add more to this as I figure more out. — ab3d_work, Dec 08 '16 at 15:56

Understanding flex boxes

1 Answers1