废话不多说！
flex- 内容宽度等分
//css
.box {
display: flex;
}
.box div {
flex: 1;
border: 1px solid red;
}
//html
<div class=”box”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
左右布局，一侧定宽，一侧自适应撑满
//css
html,
body {
height: 100%
}
.main {
display: flex;
height: 100%;
}
.left,
.right {
height: 100%;
border: 1px solid red;
box-sizing: border-box;
}
.left {
width: 300px;
}
.right {
width: 100%;
}
//html
<div class=”main”>
<div class=”left”> 固定宽度 300px</div>
<div class=”right”> 自适应宽度 </div>
</div>
未知高宽上下左右居中
//css
html,
body {
height: 100%
}
.main {
display: flex;
height: 100%;
justify-content: center;
align-items: center
}
.box {
width: 300px;
border: 1px solid red;
}
//html
<div class=”main”>
<div class=”box”> 未知高度上下左右居中 </div>
</div>
这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。