多屏显示

<div class="container">
<div class="box dark_blue"></div>
<div class="box light_blue"></div>
<div class="box green"></div>
<div class="box red"></div>
<div class="box orange"></div>
</div>

对应的 CSS ： .container { display: flex; flex-wrap: wrap; } .box { 100%; } @media screen and (min- 450px) { .light_blue, .green { 50%; } } @media screen and (min- 550px) { .dark_blue, .light_blue { 50%; } .green, .red, .orange { 33.33333%; } } @media screen and (min- 700px) { .container { 700px; margin-left: auto; margin-right: auto; } }