- Objective:
- Breadcrumb:
# 概念阐释
- 将默认状态下一行显示的item转换为多行显示
- 当主轴方向为`row` `row-reverse`时,横向换行
- 当主轴方向为` column` `column-reverse`时，且container的高度固定时，纵向换行
- `flex-flow` 属性是[[CSS Flexbox container direction 弹性盒子方向| flex-direction]]和 flex-wrap 的简写。
## 语法
```css
.container {
flex-direcetion: row row-reverse column column-reverse;
flex-wrap:
}
/*
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
*/
```
# 实例
```html
<style>
.container{
display:flex;
flex-direction:column;
height: 400px;
/* flex-direction:row */
flex-wrap: wrap;
border:1px solid red;
}
.item{
border:1px solid black;
width:50px;
height:50px;
margin:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
```
# 相关内容
- grid布局需要的代码更多，要按照8.33%x12来计算一行显示多少个item
- 还需每行写一个html div元素，把grid的css格式用class链入进去
- flex-wrap只需要在container里用这个属性就可以了
# 参考资料
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap