[Solved] How to arrange items in a flexbox?

by


Simple flexbox approach:

#item1 { height: 200px; }
#item2, #item3 { height: 100px }
#item1 { background: yellow; }
#item2 { background: green; }
#item3 { background: blue; }

.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}
<div class="parent">
  <div id="item1">Item1</div>
  <div id="item2">Item2</div>
  <div id="item3">Item3</div>
</div>

Simple float and no flexbox appropach:

#item1 { background: yellow; }
#item2 { background: blue; }
#item3 { background: green; }

#item1 { 
  height: 200px;
  float: left;
  width: 50%;
}

#item2, #item3 {
  height: 100px;
  float: right;
  width: 50%;
}
<div class="parent">
  <div id="item1">Item1</div>
  <div id="item2">Item2</div>
  <div id="item3">Item3</div>
</div>

7

solved How to arrange items in a flexbox?