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相反。