flex-wrap属性定义了三种值，分别是：
nowrap （默认值） 如果排不下不进行换行wrap 进行换行，第一行在上面wrap-reverse 进行换行，第一行在下面首先定义12个高为300px的矩形
index.html
<body> <div class="box"> <div class="square">A</div> <div class="square">B</div> <div class="square">D</div> <div class="square">E</div> <div class="square">F</div> <div class="square">G</div> <div class="square">H</div> <div class="square">I</div> <div class="square">J</div> <div class="square">K</div> <div class="square">L</div> <div class="square">M</div> <div class="square">N</div> </div> </body>先不定义flex-wrap属性
demo.css
.square{ height: 150px; width: 300px; border:1px solid #000; background-color: aqua; display: inline; } .box{ display: flex; /* flex-direction: row; */ flex-direction: row; /* flex-wrap: wrap; */ }效果下图所示
若把flex-wrap属性的值改为wrap。
.box{ display: flex; /* flex-direction: row; */ flex-direction: row; flex-wrap: wrap; }效果下图所示
可见12个矩形因排不下而换行了。
若把flex-wrap属性的值改为 wrap-reverse。
.box{ display: flex; /* flex-direction: row; */ flex-direction: row; flex-wrap: wrap-reverse; }效果则变为第一行在下面。
