属性order:规定子容器排列顺序,值越小越靠前,默认0支持负数
<style>
.flexTest{
display: flex;
}
.item {
width: 100px;
height: 100px;
background: #c3c3c3;
margin: 10px;
}
.item1 {
order: 3;
}
</style>
</head>
<body>
<div class="flexTest">
<div class="item item1">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
属性flex-grow设置子容器放大比例:
.flexTest{
display: flex;
}
.item {
background: #c3c3c3;
margin: 10px;
padding: 10px;
flex-grow: 1;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 1;
}
<body>
<div class="flexTest">
<div class="item item1">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>