html - CSS flexbox的基本布局

我正在使用flexbox设计基本布局。



我已经尝试了以下代码，但无法正常工作：

<div id="wrapper">
    <div id="container">
        <div id="div1">1</div>
        <div id="div2">2</div>
    </div>
    <div id="div3"></div
</div>

#wrapper {display:flex;flex-direction:row;}
#div1, #div2 {display:block;}
#container, #div3 {flex:1};

可以根据需要更改代码。

最佳答案

您可以将#container用作垂直柔性容器，因此可以在#div1和#div2之间共享高度。

#wrapper {
  display: flex;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
#container,
#div1,
#div2,
#div3 {
  flex: 1
}
#container {
  display: flex;
  flex-direction: column;
  border-right: 1px solid black;
}
#div2 {
  border-top: 1px solid black;
}

<div id="wrapper">
    <div id="container">
        <div id="div1"> div 1</div>
        <div id="div2"> div 2</div>
    </div>
    <div id="div3"> div 3</div
</div>

关于html - CSS flexbox的基本布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35051244/