[toc]
flex-wrap
flex-wrap属性设置⼦项⽬的换⾏⽅式
| 值 | 描述 | 示例 |
|---|---|---|
| nowrap | 默认值。不换⾏ | 1 |
| wrap | 换⾏，从上往下排列，第⼀⾏在上⽅ | 2 |
| wrap-reverse | 换⾏，从下往上排列，第⼀⾏在下⽅ | 3 |
示例1 nowrap
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.flexTest {
display: flex;
width: 360px;
/* no-wrap可不写，为默认 */
flex-wrap: no-wrap;
border: 1px solid red;
}
.item {
width: 100px;
height: 100px;
background-color: gray;
margin: 10px;
text-align: center;
line-height: 100px;
}
</style>
<body>
<h1>flex-wrap</h1>
<div class="flexTest">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
效果
父元素为360px 子元素一个100px 加上margin共460px,可是设置no-wrap后并没有换行
示例2 wrap
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.flexTest {
display: flex;
width: 360px;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
background-color: gray;
margin: 10px;
text-align: center;
line-height: 100px;
}
</style>
<body>
<h1>flex-wrap</h1>
<div class="flexTest">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
效果
设置了 wrap后自动换行了
示例3
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.flexTest {
display: flex;
width: 360px;
/* no-wrap可不写，为默认 */
flex-wrap: wrap-reverse;
border: 1px solid red;
}
.item {
width: 100px;
height: 100px;
background-color: gray;
margin: 10px;
text-align: center;
line-height: 100px;
}
</style>
<body>
<h1>flex-wrap</h1>
<div class="flexTest">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
效果
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写⽅式，默认值是row nowrap
语法：
flex-flow: <flex-direction> || <flex-wrap>;
来源：oschina
链接：https://my.oschina.net/xuzilong/blog/3176094