如何在 flexbox 中排列项目？

Question

<div class="parent">
    <div id="item1">Item1</div>
    <div id="item2">Item2</div>
    <div id="item3">Item3</div>
</div>

如何排列item，我想让item 2和item 3出现block，让item 1和item 2和item 3组成的block元素内联。item 1的高度和item 2的高度一样将第 3 项作为一项。

Answer 1

简单的flexbox 方法：

#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>

简单的float 和没有flexbox 方法：

#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>