CSS代码: body{ padding: 0; margin: 0; } .container{ width: 100%; height: 400px; background: skyblue; display: flex; flex-direction: row; justify-content: center; align-items: center; } .son{ height: 50px; flex: 1; } .son.bg01{ background: pink; height: auto; align-self: stretch; } .son.bg02{ background: black; font-size: 32px; color: #fff; } .son.bg03{ background: yellow; } .son.bg04{ background: white; }
HTML代码: <div class="container"> <div class="son bg01">1111111</div> <div class="son bg02">2222222222</div> <div class="son bg03">333333333</div> <div class="son bg04">44444444</div> </div>

最终结果:

Flex布局-子客ZOG