flex弹性布局的应用四 之flex属性
程序员文章站
2022-05-26 22:22:21
...
flex属性可理解为 :子元素的长度
主要代码
html
<div class="content">
<div class="c-1">1</div>
<div class="c-1">2</div>
<div class="c-1">3</div>
<div class="c-1">4</div>
</div>
css
.content{
width: 800px;
height: 400px;
background-color:#dbdbdb;
display: flex;
}
.content div:nth-child(1){
flex:1;
}
.content div:nth-child(2){
flex:2;
}
.content div:nth-child(3){
flex:1;
}
.content div:nth-child(4){
flex:2;
}
.c-1{
width: 115px;
height: 180px;
background-color:pink;
border: 1px solid #f44336;
}