flex 弹性布局
最后更新于：2022-04-02 03:14:56
[TOC]
>参考阮一峰[网址](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
## flex弹性布局
```css
.partent{
display:flex;
flex-direction: row | row-reverse | column | column-reverse;
align-items:center;//垂直居中显示
// justify-content:center;水平显示
}
```
### 主轴属性
6个属性在容器上
```
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
```
**flex-direction 主轴方向**
`row | row-reverse | column | column-reverse;`
**flex-wrap 换行**
`nowrap | wrap | wrap-reverse;`
**justify-content 项目在主轴的方向**
`flex-start | flex-end | center | space-between (两端对齐) | space-around(每个项目两侧的间隔相等);`
---
**align-items 项目在交叉轴上如何对齐**
`flex-start | flex-end | center | baseline | stretch;`
### 项目属性
6个属性在项目上
```
order
flex-grow
flex-shrink
flex-basis
flex
align-self
```
**flex-grow 所占比例**
`flex-grow: ; /* default 0 */`
';