- Objective:
- Breadcrumb:
# 概念阐释
- 弹性盒子有4种不同的方向: `row ,row-reverse ,column ,column-reverse`
- 默认的值是`row`
- `row-reverse`: 是从右往左的1234
- `column-reverse`: 是从下往上的1234，如果定义一个高度会看得更加明显
- `flex-flow` 属性是[[CSS Flexbox container direction 弹性盒子方向| flex-direction]]和 [[CSS Flexbox container flex-wrap 卷曲| flex-wrap]]的简写。
## 语法
```html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
```
```css
.container {
display:flex;
flex-direction: row, column, row-reverse, column-reverse
}
.item {
border: 2px solid black;
margin:10px;
}
```
# 实例
复写这个样式：并尝试`row-reverse ,column ,column-reverse`
```html
<div class="container">
<div class="item">sale sale sale1</div>
<div class="item">sale sale sale2</div>
<div class="item">sale sale sale3</div>
<div class="item">sale sale sale4</div>
</div>
```
```css
.container {
display: flex;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
border:1px solid black;
width:300px;
/* height: 500px; */
}
.item {
width: 50px;
border:1px solid red;
margin:auto;
margin-top:10px;
margin-bottom:10px;
}
```
# 相关内容
# 参考资料