FLEX 布局
css3 引入一种新的布局模式——Flexible Box 布局，即伸缩布局盒模型（弹性盒布局），用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。
主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）,flex 容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器,最重要的是，flex 布局反向不可预知。
1
2
3
4
5
6
7
8
| Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start；
主轴的开始位置结束位置叫做main end；
交叉轴的开始位置叫做cross start；
交叉轴的结束位置叫做cross end；
项目默认沿主轴排列；
|
flex 容器属性
1、display:flex、inline-flex
1
2
| 设置元素盒模型改成弹性盒模型
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
|
2、flex-direction
1
2
3
4
5
| flex-direction:属性规定灵活项目的方向（主轴方向）。
row:默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse:与row相同，但是以相反的顺序。
column:灵活的项目将垂直显示，正如一个列一样。
column-reverse:与column相同，但是以相反的顺序。
|
3、flex-wrap
1
2
3
4
| flex-wrap: 用于设置伸缩项目在主轴上的换行方式
nowrap:默认值。规定灵活的项目不拆行或不拆列。
wrap:规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse:规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
|
4、 flex-flow
1
| flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;-简化代码
|
5、 justify-content
1
2
3
4
5
6
| justify-content：用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-start:默认值。项目位于容器的开头。
flex-end:项目位于容器的结尾。
center:项目位于容器的中心。
space-between:项目位于各行之间留有空白的容器内。
space-around:项目位于各行之前、之间、之后都留有空白的容器内。
|
6、align-items
1
2
3
4
5
6
7
8
| align-items:定义flex子项目在flex容器的侧轴（纵轴）方向上的对齐方式。
stretch:默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center:元素位于容器的中心。
flex-start:元素位于容器的开头。
flex-end:元素位于容器的结尾。
baseline:元素位于容器的基线上。
|
7、align-content
1
2
3
4
5
6
7
8
9
10
| align-content：用于设置多行子元素在容器侧轴上的对齐方式(多行时才有效)；
stretch:默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center:元素位于容器的中心。
flex-start:元素位于容器的开头。
flex-end:元素位于容器的结尾。
space-between:元素位于各行之间留有空白的容器内。
space-around:元素位于各行之前、之间、之后都留有空白的容器内。
说明：
align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用
|
flex 项目属性
1、align-self 属性
1
2
3
4
5
6
7
8
9
| align-self：属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式
注意：align-self 属性可重写灵活容器的 align-items 属性。
auto:默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为 "stretch"。
stretch:元素被拉伸以适应容器。
center:元素位于容器的中心。
flex-start:元素位于容器的开头。
flex-end:元素位于容器的结尾。
baseline:元素位于容器的基线上。
|
2、flex-xxx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| flex-grow：用于设置或检索弹性盒子项目的扩展比率；
number:规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
即当容器空间大于内部元素空间之和时，剩余部分将根据各元素指定的flex-grow按比例分配，使各子元素增大；默认值为0，表示剩余空间不分配。
flex-shrink：设置弹性盒的伸缩项目的收缩比率；
number:规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
Flex子元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值；默认值为1，表示溢出时等比例缩小；
算法-公式：
超出空间的像素数：1000-(900+200)=-100px;
加权总和：=(第一个子元素的宽度)*(shrink)+（第二个子元素的宽度）* (shrink)+....;
A收缩的像素数：(Awidth*shrink)/加权综合)*超出空间 =收缩的像素数
flex-basis:设置弹性盒伸缩基准值（指定flex-item在主轴上的初始大小）
number:规定灵活项目的初始长度。
auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
order：属性设置或检索弹性盒模型对象的子元素出现的順序。
number:值越小排列越靠前，值越大顺序越靠后
6）flex：
（1）flex 属性用于设置弹性盒模型对象的子元素如何分配父元素的空间。
（2）flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
auto=1 1 auto
none= 0 0 auto
1= 1 1 auto
|
xx
1
2
3
4
5
| 1. 居中：给弹性项目设置margin:auto，自动获取弹性容器中剩余的空间。可以使弹性子元素在弹性容器的两轴方向都完全居中。
2. 设置了 margin-right/left/bottom/top: auto; 它将剩余的空间放置在元素的某侧；
|