Flex布局
一、简介
弹性布局是通过调整其内部元素的宽高，从而在任何显示设备上实现对可用显示空间的最佳填充。弹性容器可以扩展其内部元素来填充可用空间，或者将其收缩来避免溢出。
- 弹性容器(Flex Container)
通过以下方式定义：
display: flex;
或
display: inline-flex;
- 弹性项目(Flex Item)
弹性容器中的子元素
- 轴(Axis)
弹性容器有两个轴，弹性项目依次排列的那个轴为主轴(main axis)，与主轴垂直的轴为侧轴(cross axis)。
二、属性
1、flex-direction
此属性用来定义弹性容器的主轴，可以取以下值：row、row-reverse、column、column-reverse
-
row、row-reverse主轴将沿inline元素排列方向水平延伸
-
row
交叉轴为垂直方向
-
row-reverse
-
-
column、column-reverse主轴沿block元素排列方向垂直延伸
-
column
交叉轴为水平方向
-
column-reverse
-
2、justify-content
此属性定义了浏览器如何分配父容器主轴(main-axis)方向上弹性项目之间及其周围的空间。
- flex-start
- center
- flex-end
- space-between
第一个弹性项目与主轴起点对齐，最后一个弹性项目与主轴终点对齐，其余空间平均分配
- space-around
分配给两端的空间是弹性项目之间空间的一半
- space-evenly
分配给弹性项目相同的空间
3、align-items
此属性定义了浏览器如何分配父容器侧轴(cross-axis)方向上弹性项目之间及其周围的空间，与justify-content属性作用类似，只是方向为它的垂直方向。
-
flex-start
-
单行
-
多行
-
-
center
-
单行
-
多行
-
-
flex-end
-
单行
-
多行
-
-
stretch
-
单行
-
多行
-
4、align-self
用于对齐单个弹性项目，该属性会对齐当前flex行中的flex项目，并覆盖align-items的值。如果弹性项目侧轴方向上的任何margin被设置为auto，则align-self属性将被忽略。
-
可选值
-
auto
使用父元素
align-items的值 -
flex-start
-
center
-
flex-end
-
stretch
-
baseline
-
-
Example
-
父容器：
align-items: flex-start; -
a：
align-self: stretch; -
b：不设置
align-self，使用父容器align-items属性的值 -
c：
align-self: center; -
d：
align-self: flex-end; -
e：
align-self: auto;
-
5、align-content
与align-items属性类似，区别在于：align-content是只适用于多行的弹性容器，它会将所有的弹性项目打包在一起后再对齐剩下的空间。
- flex-start
- center
- flex-end
- stretch
- space-between
- space-around
- space-evenly
6、flex-basis
此属性在多余空间被分配前初始化弹性项目的尺寸，初始值为auto。如果flex-basis为auto，那么浏览器会先检查弹性项目是否设置了绝对尺寸来计算出该项目的初始值。例如：如果给一个item设置了200px的宽度，那么它的flex-basis的值也为200px。
如果item是自动调整大小的，那么auto会解析为其内容的大小，因为flexbox将会把max-content的大小做为flex-basis的值。
-
Example
-
A：
width: 100px;主尺寸为100px
-
B：
width: 100px; flex-basis: 200px;主尺寸为200px
-
C:
主尺寸为内容的宽度
-
7、flex-grow
此属性决定了positive free space分配时，弹性项目相对于容器中其他弹性项目的增长程度。
- A、BRAVO、C宽度为
max-content
flex: 0 1 auto;
- 平均分配
positive free space
flex: 1 1 auto;
- 平均分配大小(相同尺寸)
flex: 1 1 0;
-
按比例分配
-
A
flex: 1 1 0; -
B
flex: 2 1 0; -
C
flex: 3 1 0;
-
8、flex-shrink
此属性决定了negative free space分配时，弹性项目相对于容器中其他弹性项目的收缩程度。只要flex-shrink设置了正值，弹性项目就会收缩以至于它们不会溢出容器。
- 收缩
下图中，A、B、C的宽度均为200px，容器宽度为500px，使用默认的flex-shrink(1)，每个弹性项目会收缩一定宽度以至于不溢出容器：
- 不收缩
设置弹性项目不收缩(flex-shrink: 0;)：
-
按比例收缩
下图中，A、B、C的宽度均为300px，容器宽度为500px
-
A:
flex: 1 1 auto; -
B:
flex: 1 2 auto; -
C:
flex: 1 3 auto;
-
- 收缩至最小宽度
弹性项目在缩小时，不会小于min-content的大小：
9、flex-wrap
此属性可以指定弹性项目是单行显示还是多行显示，如果允许换行，此属性可以让你控制行的堆叠方向；默认值为nowrap。
下面例子中容器宽度为500px，弹性项目宽度为115px：
- nowrap
- wrap
- wrap-reverse
10、order
此属性指定了弹性容器中弹性项目在布局时的顺序，弹性项目按照order属性值的升序排列。如果弹性项目的order属性值相同，则按源码中的位置排列。
此属性值为数字，包括负数，默认值为0。
-
Example
-
A: 使用默认的
order(0) -
B:
order: 2; -
C:
order: -1; -
D:
order: 1;
-
三、其他说明
1、对齐
- 使用
auto margins对齐主轴项目
没有可用的justify-items或justify-self属性对齐主轴的item(s)，因为主轴上的items是被当作一组来处理的。然而，我们可以使用auto margins将一个或一组item(s)和其他的items分离的对齐。
常见的情况是导航栏中有一些items是左对齐的，另外一些是右对齐的，如下图所示：
上面的例子中：给D设置了auto margins：margin-left: auto;。块级元素margin auto的作用就是尽可能多的占据多余空间-
2、弹性项目的尺寸
为了计算有多少可用来布局弹性项目(item)的空间，浏览器需要知道这个item有多大才能开始。浏览器如何计算那些没有设置绝对宽度和高度的弹性项目的尺寸呢？
- min-content
此关键字使浏览器尽可能的抓住机会来自动换行，变得尽可能小且没有溢出；本质上是字符串中最长的单词决定了字符串的大小。
border: 1px dotted #979797;
width: min-content;
- max-content
和min-content相反，它会尽可能的变大，没有自动换行的机会；如果容器太窄，它将会溢出。
border: 1px dotted #979797;
width: max-content;
flex-shrink: 0;/*在flex容器中*/
3、正负自由空间
- positive free space
当容器主轴上flex项目的尺寸之和小于容器的尺寸时，容器中就会有多余的未被填充的空间，这些空间就叫做positive free space。
- negative free space
当容器主轴上flex项目的尺寸之和大于容器的尺寸时，容器的空间不足以容纳所有的flex项目，此时flex项目的尺寸之和减去容器的尺寸就是negative free space。
flex-shrink: 0;
4、flex属性
flex-grow、flex-shrink、flex-basis属性通常用flex表达：
flex: flex-grow flex-shrink flex-basis;
-
默认值：
-
flex-grow: 0
-
flex-shrink: 1
-
flex-basis: auto
-
-
语法：
-
单值
值必须为以下其中之一：
-
一个无单位的数字，它会被作为
flex-grow的值 -
一个有效的宽度值，它会被作为
flex-basis的值 -
关键字
none、auto或initial
-
-
双值
第一个值必须为一个无单位的数字，它会被作为
flex-grow的值；第二个值必须为以下其中之一：-
一个无单位的数字，它会被作为
flex-shrink的值 -
一个有效的宽度值，它会被作为
flex-basis的值
-
-
三值
同属性定义
-