弹性布局(伸缩布局)

伸缩布局(弹性布局|伸缩盒子)

★为父元素设置

1. display:flex

父元素变为伸缩盒子 display:flex --子元素就会变成伸缩项

2. justify-content

设置子元素在主轴(X轴)方向的排列方式

• flex-start --> 从主轴的开始方向开始排列 默认值
• flex-end --> 从主轴的结束方向开始排列
• center --> 主轴的中心开始排列
• space-between --> 两端对齐 中间的子元素平均分配剩余空间
• space-around --> 每个子元素两边平均分配剩余空间

3. flex-wrap

控制子元素是否换行

• nowrap --> 默认值 不换行
• wrap --> 换行显示
• wrap-reverse --> 换行翻转

4. flex-direction

控制主轴的方向

• row 从左到右显示水平
• row-reverse 从右到左
• column 从上到下
• column-reverse 从下到上

5. flex-flow

flex-flow : flex-wrap , flex-direction

6. align-items

设置子元素在侧轴方向的显示方式

• flex-start 顶对齐
• flex-end 底对齐
• stretch 拉伸 – 默认值前提不给子元素设置高度
• center 居中对齐
• baseline 基线对齐

★为子元素设置

flex-grow:1

• 设置子元素占据剩余空间的比例 默认值是 0
• 计算公式 当前子元素的flex-grow值 / 所有兄弟元素的flex-grow值 的和

flex-shrink:1

• 设置子元素的收缩比例 默认值是1
• 计算公式 当前子元素的flex-shrink值 / 所有兄弟元素的flex-shrink值 的和

flex:numebr数值

• 计算公式 当前子元素的flex值 / 所有兄弟元素的flex值 的和

align-self

设置子元素在侧轴方向的显示方式

• flex-start 顶对齐
• flex-end 底对齐
• stretch 拉伸 – 默认值前提不给子元素设置高度
• center 居中对齐
• baseline 基线对齐

多列布局

• 设置列数 column-count: 数值
• 设置列间隙的样式 column-rule: 1px solid red
• 设置列间隙 column-gap:80px;
• 设置列宽 column-width:100px 它与column-count是冲突 取大优先
• 设置跨列 column-span : 1 || all