柔性盒子容器

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>