版权声明:本文为博主原创文章,未经博主允许不得转载。
flex布局之子元素flex的值这里分三种情况,一种是子元素的宽是相同的,即flex:1,另一种是三个子元素宽是不同的,即flex设置为不同的比例,如:1:6:1,另一种是有一个子元素的宽是固定的,这时flex的值可以设置为固定宽,比例,比例,如:200px:6:1,下面以代码进行说明:
html:
<div class="flex">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="flex1">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="flex2">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
css为:
.flex {
display: flex;
}
.flex div {
width: 200px;
height: 200px;
background: pink;
margin: 10px;
flex: 1;
}
.flex1 {
display: flex;
}
.flex1 div {
width: 200px;
height: 200px;
background: pink;
margin: 10px;
}
.flex1 .one {
flex: 1;
}
.flex1 .two {
flex: 6;
}
.flex1 .three {
flex: 1;
}
.flex2 {
display: flex;
}
.flex2 div {
width: 200px;
height: 200px;
background: pink;
margin: 10px;
}
.flex2 .one {
flex: 200px;
}
.flex2 .two {
flex: 6;
}
.flex2 .three {
flex: 1;
}
则三个的效果如图所示: