flex弹性布局

简介：
容器的属性：
flex-direction：row（默认） | row-reverse | column | column-reverse;
flex-wrap：nowrap（默认） | wrap | wrap-reverse;
flex-flow：<flex-direction> <flex-wrap>;
justify-content：flex-start（默认） | flex-end | center | space-between | space-around;
align-items：flex-start | flex-end | center | baseline | stretch（默认）;
align-content：flex-start | flex-end | center | space-between | space-around | stretch（默认，轴线占满整个交叉轴）;

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex子项的属性:
order:<integer>; / 默认值 0，可以是负值 /
flex-grow：<number>; / 默认值 0 /
flex-shrink：<number>; / 默认值 1 /
flex-basis：<length> | auto; / 默认值 auto,flex元素在主轴方向的初始大小 /
flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 /
//该属性有两个快捷值: auto (1 1 auto) 和 none (0 0 auto)。
align-self:auto(默认) | flex-start | flex-end | center | baseline | stretch;
css:
writing-mode:horizontal-tb | vertical-rl | vertical-lr;
// writing-mode：书写模式，属性定义了文本的主轴，同时还定义了垂直于主轴的侧轴的排列方向
direction: ltr | rtl; //设置文本、块级元素的默认对齐方式
// direction:定义了主轴的方向(及行内文本排列的方向)

1.flex-direction:
row是默认值，表示flex子项显示为水平排列。方向为当前文档水平流方向，默认是从左到右排列。（与direction有关）
row-reverse：和row相反。
column：表示flex子项显示为垂直排列。默认情况下是从上往下排列，使用writing-mode可以改变这个顺序。

延伸：row代表flex容器的主轴方向和writing-mode的行内书写方向一致；column代表flex容器的主轴方向和writing-mode的行内书写方向垂直。

flex-flow: <flex-direction> <flex-wrap>;
这个属性是两者的缩写，表示弹性布局的流动特性，也就是指明了在弹性布局中主轴和侧轴。
在flex容器里面，主轴方向是flex子项排列的方向，侧轴方向是多个flex子项形成的行所排列的方向。
为什么侧轴方向会用flex-wrap指定呢？因为没有换行的话，就没有多行元素，也不会涉及到行与行之间该朝着哪个方向依次排列。

flex子项的basis属性，以及flex简写属性：
flex-basis：<length> | auto; / 默认值 auto,flex元素在主轴方向的初始大小 /
需要注意的是主轴方向，flex-basis代表的并不一定是直观图形上的长度：

flex是flex-grow，flex-shrink，flex-basis的缩写，默认值是flex:0 1 auto,含义是空间剩余，子项不增长;空间不足，子项收缩;元素尺寸适应于内容。
语法如下：
flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex属性值可以缺省，即可以设置1个值，2个值或者写全3个值。
需要注意，缺省的值并不一定会被自动补写为默认值，具体规则如下：
（1）如果flex属性值只有一个值：

• 如果是数值，如flex:1，则1为flex-grow属性的值，此时flex-shrink:1，flex-basis:0%
• 如果是长度值，如flex:100px，则是flex-basis的值，此时flex-grow:1，flex-shrink:1
  （2）如果flex属性值有2个值，第一个值一定是flex-grow数属性的值，第二个值根据类型不同对应不同的属性:
• 如果第二个是数值，例如flex: 1 2，则2是flex-shrink的值，此时flex-basis:0%
• 如果第二个值是长度值，例如flex: 1 100px，则100px是flex-basis的值，此时flex-shrink:1
  （3）如果flex属性有3个值，则长度值为flex-basis的值，其余值按顺序分别是flex-grow和flex-shrink的值：
• flex: 1 2 50%
• flex: 50% 1 2
  按照css的说法，这样设计的目的是让flex属性的表现更符合我们日常开发需要的效果
  单值语法与其等价的三值语法：

单值语法	三值语法	说明
flex:initial	flex:0 1 auto	默认值;空间剩余，子项不增长;空间不足，子项收缩;元素尺寸适应于内容
flex:0	flex: 0 1 0%
flex:none	flex: 0 0 auto	表示"没有"，flex子项没有弹性，收缩和扩张
flex:1	flex: 1 1 0%
flex:auto	flex: 1 1 zuto	表示"自动"，flex子项会自动填满剩余空间或自动收缩

---

剩余空间的分配以及空间不足时的收缩计算
flex-basis：表示在flex 子项 被放入flex容器之前的大小，也就是items的理想或者假设大小，但是并不是其真实大小，其真实大小取决于flex容器的宽度
flex-grow：容器剩余空间多余时候的分配规则
flex-shrink：容器剩余空间不足时候的分配规则
flex-grow具体规则：

• 所有剩余空间总量是1(剩余空间总量 = flex容器总量 - flex子项flex-basis之和)

• 如果只有1个flex子项设置了flex-grow，则：

  1. flex-grow小于1,flex子项扩展的空间是总剩余空间和这个比例的计算值
  2. flex-grow大于等于1，flex子项独占所有剩余空间

• 如果有多个子项flex设置了flex-grow，则：

  1. flex-grow属性值之和小于1，则每个flex子项扩展的空间就是总剩余空间和当前flex子项设置的flex-grow比例的计算值
  2. flex-grow属性值的总和大于1，则所有剩余空间被利用，分配比例就是各个flex子项的flex-grow属性的比例。

  flex-shrink具体规则：

• 如果只有1个flex子项设置了flex-shrink属性：

  1. flex-shrink小于1，则收缩不完全，会有一部分内容溢出flex容器。（收缩值为：按flex-basis计算时，溢出的部分与flex-shrink的乘积）
  2. flex-shrink大于等于1，则完全收缩，元素正好填满flex容器。

• 如果多个flex子项设置了 flex-shrink属性：

  1. flex-shrink属性值总和小于1，则收缩不完全，每个元素收缩尺寸和“完全收缩尺寸”的比例就是该元素的flex-shrink属性的值。
  2. flex-shrink总和大于等于1，则完全收缩，每个元素收缩尺寸的比例和flex-shrink属性值的比例一样。