flex布局的对齐方式

1 弹性盒子组成

/* 弹性容器 */

display:flex;

/* 主轴 */

justify-content

/* 侧轴*/

align-items

2 主轴对齐方式

/* 默认值 左上角开始 */

justify-content: flex-start;

/* 右上角开始 */

justify-content: flex-end;

/* 水平居中对齐 重要*/

justify-content: center;

/* 间距在子盒子的两侧 */

justify-content: space-around;

/* 两端对齐 空间在子盒子之间 重要*/

justify-content: space-between;

/* 盒子的所有间距都相等 */

justify-content: space-evenly;

3 侧轴对齐方式

/* 顶部对齐 */

align-items: flex-start;

/* 底部对齐 */

align-items: flex-end;

/* 垂直居中对齐 重点*/

align-items: center;

/*默认值 顶部对齐 当子盒子没有高度时 会将子盒子拉伸充满整个容器 */

align-items: stretch;

4 改变主轴方向

/* 改变主轴方向 默认是水平 从左到右排列 */

flex-direction: row;

/* 垂直方向 从上向下 重点*/

flex-direction: column;

/* 水平排列 从右向左 */

flex-direction: row-reverse;

/* 垂直方向 从下向上 */

flex-direction: column-reverse;

5 强制换行 flex-wrap:wrap