设置一个父div,添加样式display:flex。中间div设置flex-grow:1,(等同代码中设置flex:1。flex是grow、shrink、basis的简写)但是盒模型默认紧紧挨着,可以使用margin控制外边距。middle一定在中间,否则需要order属性来调整。
通过项目属性flex-grow设置middle的放大比例,将空余的空间用middle来填充,使三个项目排满一整行;默认为0,也就是对剩余空间不做处理。通过项目属性flex-basis 设置left和right的固定宽度。
<style>
.main{
width:100%;
height:300px;
display: flex;
/* 主轴方向,起点在左端 */
flex-direction: row;
/* 项目在主轴的对齐方式 */
justify-content: flex-start;
}
.left{
/* flex属性是flex-grow, flex-shrink 和 flex-basis的简写,
默认值为0 1 auto。后两个属性可选。 */
flex:0 1 200px;
height: 100%;
background-color:red;
}
.right{
flex:0 1 200px;
height:100%;
background-color:pink;
}
.middle{
flex:1;
height: 100%;
background-color:greenyellow;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>