柔性盒子容器

Question

我想創建一個柔性容器，它有3個子項目。但是，我希望兩個子項是列，而第三個是在列下方運行的行（如頁腳）。可能嗎？

Answer 1

這可能是最好用兩個div，一個柔性盒實現，並且一個未：見下文：

#wrapper { 
 
    display: flex; 
 
    background-color: lightblue; 
 
} 
 
#a { 
 
background-color: lightgreen; 
 
} 
 
#b { 
 
background-color: lightgray; 
 
} 
 
#c { 
 
background-color: lightyellow; 
 
}

<div id="wrapper"> 
 
    <div id="a">This is a</div> 
 
    <div id="b">This is b</div> 
 
</div> 
 
<div id="c">This is c</div>

Answer 2

你可以做這樣的事情THIS

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
.col-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.col { 
 
    margin: 10px; 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: blue; 
 
} 
 

 
.row { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div class="col-container"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    </div> 
 
    <div class="row"></div> 
 
</div>