Css-flex布局
Flex可以使元素成为一种容器，而在容器内的子元素将会成为容器成员
设置为flex属性后，子元素的float、clear和vertical-align属性将失效
通俗的来说，flex需要设置父级元素，像是这样，成为flex容器
display: flex;
在这种样式下的子元素，将会处于flex容器之中，可以支持进行便捷的布局样式控制，如排列等
当设置为容器后，容器内将会拥有两个轴，大家常称为主轴和侧轴
一般主轴是x轴方向的，侧轴是y轴方向的
- 父级可以设置的属性
flex-direction: 控制容器内子元素排列方向flex-wrap: 控制一行排列不下时，换行的属性控制justify-content: 设置子元素在主轴上的排列方式align-items: 设置子元素为单行时，在侧轴上的排列方式align-content: 设置子元素为多行时，在侧轴上的排列方式flex-flow: 是flex-direction和flex-wrap的复合属性
父级属性
flex-direction
控制容器内元素排列方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row：主轴在水平方向，顺序排列
row-reverse：主轴为水平方向，元素从右向左排列，并且本身顺序也会倒着
column：主轴为垂直方向，从上到下排列
column-reverse：主轴为垂直方向，从下往上排列，并且元素会逆转顺序
flex-wrap
控制多个元素的排列方式，如果一行排列不下，如何进行排列，是互相挤着？还是另起一行
flex默认的子元素，在摆放时是不会换行的，在一行放不下时，只会元素的大小进行缩放，将其适应能放到这一行大小上
nowrap: 默认值，不换行
flex-wrap: nowrap
比如在row情况下，如果一行放不下，那么第四个元素出现
容器内一行的四个元素都会有适当的宽度缩小，让其可以真正可以在一行存放得下
wrap: 换行
如果一行内元素摆放不下，那么另起一行从头开始摆放
注意: 换行之后，行之间会额外多空行
wrap-reverse: 换行
这样换行之后，第一行元素将会出现在下面
justify-content
控制子元素在主轴上的对齐方式
flex-start: 默认值，从左到右，如果主轴是y轴，那么从上到下
flex-end: 从屁股往前开始排列，但是区别于flex-direction中具有reverse的排列控制，flex-end不会影响元素原有顺序
center: 在当前主轴居中对齐
space-around: 平分对齐
space-between: 两端贴墙，中间儿平分
align-items
设置子元素在侧轴上的对齐方式，可以与justify-content属性配合使用
注意: 适合在子元素单行时使用
flex-start: 从上到下
flex-end: 从下到上
center: 侧轴居中
stretch: 拉伸，但是子元素此时不能具有高度，否则无法拉伸，如果侧轴是y轴，那么就是在y轴拉伸，显得腿长
如果希望可以将一行元素整个容器内居中，可以分别设置主轴和侧轴居中
justify-content: center;
align-items: center;
align-content
设置子元素在侧轴上的对齐方式，适用于多行子元素的情况下，也就是子元素换行属性flex-wrap: wrap;
单行情况下是无效的
flex-start: 从侧轴开头进行换行排列，并且还可以取消默认wrap换行带来的空行
flex-end: 从侧轴尾部进行换行排列
center: 在侧轴居中进行换行排列
space-around: 在侧轴平分空间，一行行之间平分空间
space-between: 先在侧轴贴两边，中间元素再平分剩余空间
stretch: 默认值，一行行排列下来，各行将会伸展以占用剩余的空间
如果高度不足以摆放这么多行，那么将会适当缩小子元素的高度
类似默认不换行的情况下，对子元素的宽度进行适当的缩放
flex-flow
是flex-direction和flex-wrap的复合属性
设置主轴方向子元素排列方式以及是否换行(换列)
flex-flow: row wrap;
换行并采用row方向排列子元素
子元素属性
-
flex: 设置子元素在剩余空间内所占的份数，默认为0 -
align-self: 控制子项目在侧轴的排列方式，可以让单独某个子元素拥有不一样的对齐方式 -
order: 元素位置顺序，越小越靠前，默认为0
flex
设置子元素在剩余空间内可以占的空间，分配的空间也是剩余的空间，主要针对于单行子元素进行布局控制
比如三个子元素处于单行，现在可以让第二个子元素占据整个剩余空间，那么可以使用
flex: 1; /* 占据剩余全部 */
一般来说，如果设置了flex属性，那么元素本身的宽的意义就不太大了，要按照flex分割好的块数进行元素的宽度维护
align-self
让某个子元素有自己的侧周排列方式，和align-items类似，可以单独让某个元素在侧周的排列位置上不同
覆盖align-items属性
align-self: flex-end;
order
定义子元素先后排列顺序，数值越小，越靠前(前后位置上靠前)，默认为0
order: 0;
