基本佈局與CSS flexbox

Question

我正在設計使用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}; 

的代碼可以根據需要改變。

Answer 1

您可以使用yor #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>