关于前端:flex布局理解篇

flex 布局在前端开发过程中，应用场景十分多。同时因为它本身弱小的布局性能，深受前端开发人员的青睐。然而就我集体，在应用中总是记不住每个属性的特色，以及应用场景，每次都要查看一下阮一峰大佬的 flex 布局文章，能力定位要应用哪个属性。由此，写下这篇文章，一方面让本人加深记忆，一方面供大家参考。[flex 布局教程 - 阮一峰](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

一副图理解主轴，穿插轴

flex-direction(默认值：row)
这个好记住 direction 就是方向的意思 决定主轴的方向
```
flex-direction: row | row-reverse | column |     column-reverse;
```

flex-wrap(默认值：nowrap)

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow(默认值：row nowrap)
flex-flow -> flex-direction + flex-wrap（以上两种属性的合并）
justify-content(默认值：flex-start)
主轴的对齐形式，首先确定主轴是横向还是纵向
```
justify-content: flex-start | flex-end | center |       space-between | space-around;
```
space-between:指两头的空隙
space-around：around 有环顾四周的意思，所以指两侧都有
align-items(默认值：stretch)
穿插轴的对齐形式，首先确定主轴是横向还是纵向
```
align-items: flex-start | flex-end | center |           baseline | stretch;
```
baseline：我的项目的第一行文字的基线对齐
stretch： 如果我的项目未设置高度或设为 auto，将占满整个容器的高度
align-content(默认值：stretch)
属性定义了多根轴线的对齐形式。如果我的项目只有一根轴线，该属性不起作用。穿插轴为主
```
align-content: flex-start | flex-end | center |         space-between | space-around | stretch;
```

order(默认值：0)
属性定义我的项目的排列程序。数值越小，排列越靠前，默认为 0
flex-grow(默认值：0)
属性定义我的项目的放大比例 0:即如果存在残余空间，也不放大
flex-shrink(默认值：1)
属性定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大。
值越大放大的越多
flex-basis
属性定义了在调配多余空间之前，我的项目占据的主轴空间（main size）
```
flex-basis: <length> | auto; /* default auto */
```
flex(默认值：0 1 auto)
flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写
```
flex: none | [<'flex-grow'> <'flex-shrink'>? ||        <'flex-basis'>]
```
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self

align-self: auto | flex-start | flex-end | center       | baseline | stretch;

关于前端:flex布局理解篇

前言

基本概念

属性应用场景

子元素的属性阐明