flex基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
flex基础语法
包括设置在容器上的容器属性(6个)以及设置在项目上的项目属性(6个)，如下表格：
1 、容器
| 容器属性 | 用途 | 默认值 |
|---|---|---|
| flex-direction | 设置主轴方向 | row |
| flex-wrap | 定义如何换行 | nowrap |
| flew-flow | flew-direction\flew-wrap的简写 | row nowrap |
| justify-content | 设置主轴的对齐方式 | flex-start |
| align-items | 设置交叉轴的对齐方式 | stretch |
| align-content | 设置多行主轴的对齐方式 | stretch |
##### 容器属性与取值
flex-direction: row row-reverse column column-reverse
flex-wrap: wrap nowrap wrap-reverse
flew-flow: <flex-direction> <flex-wrap>
justify-content: flow-start | flow-end | center | space-between | space-around
align-items: flow-start | flow-end | center | baseline | stretch
align-content: flow-start | flow-end | center | space-between | space-around | stretch
2 、项目
| 项目属性 | 用途 | 默认值 |
|---|---|---|
| flow-grow | 设置放大比例 | 0 |
| flow-shrink | 设置缩小比例 | 1 |
| flow-basis | 设置初始大小 | auto |
| flow | flow-grow \flow-shrink\flow-basis的简写 | 0 1 auto |
| align-self | 设置对齐方式 | auto |
| order | 设置排序位置 | 0 |
##### 项目属性与取值
flow-grow: <number>
flow-shrink: <number>
flow-basis: <length> | auto
flow: <flow-grow> <flow-shrink> <flow-basis>
align-self: auto | flex-start | flex-end | center | baseline | stretch;
order: <integer>
我对flex的理解
- 对于容器：
1、要注意：justify-content属性是用来定义项目在主轴上如何对齐,具体对齐方式与轴的方向有关，所以要注意flex-direction定义的主轴方向。
2、要注意：align-items属性是用来定义项目在交叉轴上如何对齐,具体的对齐方式与交叉轴的方向有关，所以要注意flex-direction定义的主轴方向。 - 对于项目：
1、要理解flow-grow flow-shrink：flow-grow:用来定义有多余空间时，项目是否放大；flow-shrink用来定义空间不足时，项目是否缩小。
2、要理解：flex-basis指的是flex items在被放进一个flex容器之前的大小
3、要注意：flex-basis属性定义的是在分配多余空间之前，项目占据的主轴空间
4、要注意：flow-shrink不可为负值，order可为负值
5、要注意：order数值越小，排列越靠前
6、要注意：align-self为auto时继承父元素的align-items，若无父元素，则等同于stretch。
7、请记住：flex属性的快捷值：
flex:auto (=>1 1 auto)
flex:none (=>0 0 auto)
flex:1 (=>1 1 0%) flex:2(=>2 1 0%) flex:2 3(=>2 3 0%)
flex:50% (=>1 1 50%)
相关参考
语法：Flex 布局教程：语法篇
实践：小游戏
flex:1:flex:1
flex-basis:flex-basis与width区别
