摘要：
使用flex实现css中的三个经典布局不需要额外的代码。对齐内容：center设置水平方向居中，align center设置垂直方向居中#parent{display:flex；justify content:center；align content:center；/*stretch使框中每个元素的高度等于行高度*/align items:stretch；width:300px；}#子项{width:100px；大纲：solid1px；}3.自适应宽度：父元素中有两个子元素，其中一个子元素设置宽度，另一个子元素占用剩余宽度。
用flex实现css里的三大经典布局，不需要额外很多代码。
1,垂直居中 ：子元素在父元素中，水平垂直居中。justify-content：center设置水平方向居中，align-center设置垂直方向居中。
<div id="parent"> <div id="child"></div> </div>
#parent { /* align-content和align-items必须配合使用 */ display: flex; justify-content: center; align-content: center; align-items: center; width: 300px; height: 300px; outline: solid 1px; } #child { width: 100px; height: 100px; outline: solid 1px; }
2，二列等高：父元素里有二个子元素，一个设置高度，另一个需要和它高度一致。
<div id="parent"> <div id="child" style="height: 300px;"></div> <div id="child"></div> </div>
#parent { display: flex; justify-content: center; align-content: center; /* stretch让盒子内的每个元素的高度都等于行高 */ align-items: stretch; width: 300px; } #child { width: 100px; outline: solid 1px; }
3，自适应宽：父元素里有二个子元素，一个设置宽度，另外一个占据剩余的宽度。
<div id="parent"> <div id="child1"></div> <div id="child2"></div> </div>
#parent { display: flex; width: 300px; height: 200px; background-color: pink; } #child1 { flex: 1; /* 即使设置100px宽，还是会占据剩余的所有宽度 */ width: 100px; background-color: lightblue; } #child2 { width: 100px; outline: solid 1px; }