<div class="box">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
.box {
display: flex;
height: 200px;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.content {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
2.等宽的三列
html
<div class="father">
<div class="box1">
</div>
<div class="box2"></div>
<div class="box3"></div>
</div>
css
.father {
width: 300px;
height: 200px;
background-color: red;
display: flex;
}
div[class^='box'] {
flex: 1;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: orange;
}
.box3 {
background-color: cyan;
}