flex-grow:
<style>
.content {
display: flex;
}
.aside.left {
width:200px;
border:3px solid black
}
.aside.main0 {
flex-grow: 0;
border:3px solid red;
}
.aside.main1 {
flex-grow: 1;
border:3px solid red;
}
.aside {
margin-top:5px;
height:100px;
}
</style>
<body>
<div class="content">
<div class="aside left ">flex-grow:0</div>
<div class="aside main0">flex-grow:0</div>
</div>
<div class="content">
<div class="aside left ">flex-grow:0</div>
<div class="aside main1">flex-grow:1</div>
</div>
</body>
order:
// 3列布局
<style>
.content{
display:flex;
}
.aside.left{
order:1;
border:5px solid black;
width:200px;
}
.aside.right{
order:3;
border:5px solid black;
width:200px;
}
.aside.main{
order:2;
flex-grow:1;
border:5px solid red;
}
.aside {
height:300px;
}
</style>
<div class="content">
<div class="aside left">order:1</div>
<div class="aside right">order:3</div>
<div class="aside main">order:2</div>
</div>
Reference CSS Common 2, 3 layout