flex的元素默会默认充满一行或者一列,但是当你给他们的contanier设置了flex-wrap之后情况就会不一样了。
flex-wrap可以接受三个值:
1: nowrap
所有flex的元素充满一行或者一列。为默认值。
2: wrap
所有flex的元素按照其在HTML里面出现的顺序在多行或者多列显示
3: wrap-reverse
所有flex的元素按照其在HTML里面出现的顺序反过来在多行或者多列显示
接下来我们就来看看这三个不同的值所表现出来的效果。因为flex-wrap跟flex-direction的联系比较紧密,所以接下来会一一组合:
首先来看看我们的代码:
//html
<div class="container">
<div class="item short">1</div>
<div class="item short">2</div>
<div class="item long">3</div>
<div class="item short">4</div>
<div class="item short">5</div>
<div class="item short">6</div>
<div class="item short">7</div>
</div>
//css
.container {
width: 500px;
height: 100px;
box-sizing: border-box;
border: 1px solid green;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
background: yellow;
border: 1px solid hotpink;
width: 30%;
box-sizing: border-box;
}
.short {
background: pink;
}
1: flex-direction: row && flex-wrap: wrap
原文作者:nanaistaken
原文地址: https://segmentfault.com/a/1190000010877811
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。