弹性盒子布局知识
给容器盒子/父级标签设置弹性盒子属性:display: flex;当子标签整体尺寸超过父级标签时 子标默认会缩小均分父级标签的控件父级标签没有高度塌陷的问题默认情况下水平是主轴方向垂直是交叉轴方向主轴方向的排列方式水平左对齐 : justify-content: flex-start;水平右对齐:j
一、设置弹性盒子
给容器盒子/父级标签设置弹性盒子属性: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;
三、弹性盒子交叉轴对齐
子元素交叉轴/垂直方向 上对齐: align-items: flex-start;
垂直方向居中对齐:align-items:center;
垂直方向下对齐 : align-items:flex-end;
子元素拉伸高度以适应父级标签的高度 注意子元素默认没有设置高度才有效果
align-items:stretch;
四、设置弹性盒子多行排列
1、设置子元素换行/多行排列: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;
2、多行垂直方向/交叉轴排列
垂直上对齐:align-content:flex-start;
垂直居中对齐:align-content:center;
垂直下对齐:align-content:flex-end;
垂直方向中间间距比两边多一倍:align-content:space-around;
中间行留间距 两边行贴边:align-content:space-between;
垂直方向 多行之间的间距相等:align-content:space-evenly;
五、弹性布局轴方向反转
多行排列
主轴元素排列顺序颠倒
交叉轴多行排列方向相反:flex-wrap:wrap-reverse;
交叉轴 结束方向反转为上方向:align-content: flex-end;
更多推荐
所有评论(0)