1 // 水平居中
2 display:flex；
3 justify-content: space-around;
4
5 // 垂直居中
6 display:flex;
7 align-items:content;
8
9 // 水平垂直居中
10 display:flex;
11 justify-content:space-around;
12 align-items:center;
13
14 //父级
15 display:flex;
16 //子级
17 align-self:flex-start; // 居上对齐
18 align-self:flex-end; // 居下对齐
19 align-self:center; // 居中对齐
20 margin:auto; // 水平垂直居中
21 flex:1; //(这里数字可以随便填) //占整块的多少个
22
23
24 // align-items //注解 子元素侧轴对齐
25 align-items:flex-start; // (默认) 元素在开始位置 富裕空间占据另一侧
26 align-items:flex-end; // 富裕空间在开始位置 元素占据另一侧
27 align-items:center; // 元素居中 富裕空间 平分左右两侧
28
29
30
31 // flex-direction 自动填补空白
32 // 父级
33 display:flex;
34 flex-direction: row; // 横向自动填补空白（二选一）
35 flex-direction: column; // 纵向自动填补空白（二选一）
36 //子级
37 flex:1;
38
39
40 flex-direction // 注解
41 flex-direction:row; // 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
42 flex-direction:row-reverse;// 对齐方式与row相反。
43 flex-direction:column; // 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
44 flex-direction:column-reverse; // 对齐方式与column相反。
