弹性布局部分

/* 给容器盒子/父级标签设置弹性盒子属性 */

/* 当子标签整体尺寸超过父级标签时 子标默认会缩小均分父级标签的控件

父级标签没有高度塌陷的问题 */

display: flex;

/* 排列方向 */

/* 默认情况下 水平是主轴方向 垂直是交叉轴方向 */

/* 主轴方向的排列方式 */

/* 水平左对齐 */

/* justify-content: flex-start; */

/* 水平右对齐 */

/* justify-content: flex-end; */

/* 水平居中对其 */

/* justify-content:center; */

/* 水平方向 两边贴齐 中间留边距 */

/* justify-content: space-between; */

/* 水平方向 中间的边距比两边的边距多一倍 */

/* justify-content:space-around; */

/* 水平方向 元素间距离平均分配 */

justify-content:space-evenly;

/* 父级标签设置弹性属性 */

display: flex;

/* 子元素交叉轴/垂直方向 上对齐 */

/* align-items: flex-start; */

/* 垂直方向居中对齐 */

/* align-items:center; */

/* 垂直方向下对齐 */

/* align-items:flex-end; */

/* 子元素拉伸高度以适应父级标签的高度 注意子元素默认没有设置高度才有效果 */

align-items:stretch;

/* 父级标签设置弹性属性 */

display: flex;

/* 设置子元素换行/多行排列 */

flex-wrap: wrap;

/* 多行水平方向排列方式 */

/* justify-content: flex-start; */

/* justify-content: flex-end;

justify-content:center;

justify-content:space-around;

justify-content:space-between;

justify-content:space-evenly; */

/* 多行垂直方向/交叉轴排列 */

/* 垂直上对齐 */

align-content:flex-start;

/* 垂直居中对齐 */

align-content:center;

/* 垂直下对齐 */

align-content:flex-end;

/* 垂直方向中间间距比两边多一倍 */

align-content:space-around;

/* 中间行留间距 两边行贴边 */

align-content:space-between;

/* 垂直方向 多行之间的间距相等 */

align-content:space-evenly;

}

/* 父级标签设置弹性属性 */

display: flex;

/* 多行排列

主轴元素排列顺序颠倒 */

/* 交叉轴多行排列方向 相反 */

flex-wrap:wrap-reverse;

/* 交叉轴 结束方向反转为上方向 */

align-content: flex-end;

/* 父级标签设置弹性属性 */

display: flex;

/* flex-direction: row; */

/* 元素排列顺序颠倒

主轴起始方向颠倒 */

flex-direction:row-reverse;

justify-content:flex-end;

justify-content:flex-start;

/* justify-content:center; */

align-items:flex-end;