Flex伸缩盒子的实操+详解——flex-wrap属性
flex-wrap属性定义,如果项目在一条轴线上排不下的话,如何进行换行,或者选择不换行。
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;
}
效果则变为第一行在下面。