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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| 弹性布局&伸缩布局
display:flex;设置弹性布局
justify-content: 设置子元素在主轴上的排列方式
flex-start 让子元素从父容器的起始位置开始排列
flex-end 让子元素从父容器的结束位置开始排列
center 让子元素从父容器的中间位置开始排列
space-between 左右对齐父容器的开始和结束，中间平均分布
space-around 将多余的空间平均的分布在每一个盒子的中间 造成中间盒子的间距是左右两边盒子的两倍
space-evenly; 新属性 完全平分多余的空间
flex-direction:设置子元素的主轴排列方式
row 水平排列方向，从左到右
row-reverse 水平排列方向，从右到左
column:垂直排列方向，从上到下
column-reverse:垂直排列方向，从下到上
flex-wrap:设置子元素的换行
nowrap 默认不换行
wrap 换行
wrap-reverse 翻转
flex-flow:row wrap 结合了上面两个
flex-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值 写在子元素上
比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和 flex-grow的默认是0：说明子元素并不会去占据剩余的空间
flex-grow:1;
flex-shrink:定义伸缩比例，通过设置的值来计算收缩空间 默认值为1
flex-shrink:0;
align-items:设置子元素（伸缩项）在侧轴方向上的对齐方式(只能设置单行)
center:设置在侧轴方向上居中对齐
flex-start:设置在侧轴方向上顶对齐
flex-end:设置在侧轴方向上底对齐
stretch:拉伸 让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向 (不要给高度)
baseline:文本基线
align-content:设置子元素在侧轴方向上的对齐方式(多行的情况)
center:设置在侧轴方向上居中对齐
flex-start:设置在侧轴方向上顶对齐
flex-end:设置在侧轴方向上底对齐
stretch:拉伸 让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向 (不要给高度)
space-between:侧轴左右对齐，中间平均分布
space-around:侧轴平均的分布，中间盒子的间距是左右两边的两倍
space-evenly; 新属性 完全平分多余的空间
align-self: 控制子项单独设置排序方式
order：0 控制子项排序位置(越小越前)
|
