一、弹性盒模型
1、属性:display:flex;将盒子设置为弹性盒,一定要给父元素设置。(弹性盒的主轴默认为水平从左到右的排列)
2.flex-direction 设置主轴方向 (给父元素设置)
取值:(1)column 垂直排列
(2)row(默认值),在一行排列。
(3)row-reverse 反向的水平排列
(4)column-reverse 反向垂直排列
3.justify-content 主轴对齐方式 (给父元素设置)
取值:(1)center 居中对齐
(2)flex-start 左对齐(默认值)
(3)flex-end 右对齐
(4)space-between 两端对齐
(5)space-around 自动分配多余的空间给子项目两边
4.align-items 单行情况,侧轴对齐方式 (给父元素设置)
取值: (1)flex-start 顶端对齐
(2)flex-end 末端对齐
(3)center 居中对齐
(4)baseline 基线对齐 (行内元素、display:inline-block;都有基线对齐)
5.flex-wrap 该属性控制flex容器是单行或者多行 (给父元素设置)
取值:(1)wrap 换行
(2)nowrap 不换行
(3)wrap-reverse 反转换行
6.align-content 多行情况下,侧轴的对齐方式 (给父元素设置)
取值: (1)center 居中对齐
(2)flex-start 上对齐(默认值)
(3)flex-end 下对齐
(4)space-between 两端对齐
(5)space-around 自动分配多余的空间给子项目两边
7、align-self 子元素在侧轴方向的对齐方式 (给子元素设置)
取值:(1)auto;
(2)flex-start
(3)flex-end
(4)stretch
(5)center
8、order (给子元素设置)
取值:(1)number 数字越大,排在最后面 默认值为0;
9.flex (给子元素设置)
取值:(1)number 不能是flex:12px。这样写是错误的。
二、多列布局
1、column-count:value 分为几列
2、column-width: 最小宽度;
3、column-gap:20px ;列与列之间的间距。
4.column-rule:1px solid #ccc;设置列之间的
分割线的样式。
5.column-span:all(横跨所有列)/none。
弹性盒和多列布局
猜你喜欢
转载自blog.csdn.net/qq_38068491/article/details/82692965
今日推荐
周排行