使用flex布局实现宽度自适应

1.两侧固定,中间自适应



.box{
    width: 100%;
    display: flex;
    height: 300px;
}
.left{
    width: 100px;
    height: 200px;
    background-color:red;
}
.right{
    width: 100px;
    height: 200px;
    background-color:red;
}
.center{
    flex: 1;
    height: 300px;
    background-color: lime;
}

 
<body>         <div class="box">          <div class="left"></div>         <div class="center"></div>          <div class="right"></div>         </div>
 

2.左侧固定,右侧自适应

.box{
    width: 100%;
    display: flex;
    height: 300px;
}
.left{
    width: 100px;
    height: 200px;
    background-color:red;
}
.right{
    flex: 1;
    height: 300px;
    background-color:lime;
}



<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>

 

上一篇:浅析vertical-align属性


下一篇:CSS子元素在父元素中水平垂直居中的几种方法