居中

废话不多说！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>这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。 ...