布局

约 922 个字 20 行代码预计阅读时间 3 分钟

1 Flex

子元素宽度

当 flex 容器宽度足够时，子元素宽度默认为 max-content
当 flex 容器宽度不足时，子元素宽度默认为 min-content ，即最长的单个单词长度

宽度膨胀逻辑

flex-basis: 50px 可以直接指定元素宽度
- 同时指定 width: npx; flex-basis: auto; 时，以 width 的值为标准
flex-grow: n 中 n 即为该元素在富余宽度中分的的份数（比例）
- flex-grow: 2 的子元素增长两份宽度，flex-grow: 1仅增长一份
- 单纯想一个元素宽为另一个的 n 倍时，可以直接使用 flex-basis: 0 + flex-grow: n/1
- 当想让某个元素的宽为其他的 100倍时，需要追加设定 width: 0px 来覆盖 min-content
等分父元素 - flex-basis: 0px; flex-grow: 1;
最大不超过具体指定的 max-width

宽度缩小逻辑

父元素宽度不足时生效
- flex-shrink: 1 默认值，每个子元素缩小同样宽度以适应
- flex-shrink: 0 子元素不收缩 - 会导致溢出（自适应的时候挺有用的）
- 同理，设置 flex-shrink: n 会收缩基础份额的 n倍
最低宽度不小于 min-content / min-width

对齐

交叉轴对齐align-items
- stretch 默认值，把所有元素的高度统一为 max(子元素 height)
- flex-start / flex-end 分别使得子元素在副轴起始/终止处对齐（此时高度为 fit）
- center 使得子元素关于副轴中心对齐
- baseline 首行文字基线对齐（某一个 font-size 特别大可能会导致对齐线下移）
主轴对齐justify-content
- flex-start 默认按照主轴起点对齐
- space-between 两端没有空格，中间间隙均分富余空间
- space-around 中间间隔为 2 * 两端
- space-evenly 中间与两端间隔大小一致
多轴对齐（多行情况下） align-content
- normal 默认，不对齐
- flex-start 按副轴开始处对齐（行高适应改行最高元素），flex-end 基本同理
- space-around 同行元素无间隔，行间距中间为 2 * 首尾，其余同理

换行

flex-wrap
- no-wrap 默认不换行
- wrap 换行
- wrap-reverse 把最后一行当成第一行

排序

order
- 0 默认值，正序排列（html书写顺序）
- 1-N 排列下标（从 1 开始编号，可以手动指定标签视觉上的排列顺序）

2 Grid - 网格

列

display: gird 默认为 1 列
我们可以通过 grid-template-columns: 100px 100px 100px; / repeat(12, 50px);
- 此处我们可以手动依次输入每一列的宽度
- 也可以使用 repeat(times, width_each) 达到同时指定多列的效果
平分父元素 grid-template-columns: 1fr 1fr 1fr;
- 此处的 fr = fraction 即为宽度所占总宽的份数
- 实现一个 1:2:1 的布局可以这样 grid-template-columns: 1fr 2fr 1fr;
- fr 中间也可以突然嵌入 px 作为固定宽度单位
自动决定列数 grid-template-columns: repeat(autofill, width_each) 会根据父元素的实际宽度决定每行具体填入多少个元素，是动态的
- 我们也可以手动设置最小最大值 repeat(autofill, minmax(50px, 1fr))
grid-column-gap 手动指定列艰间距

行

gird-template-rows 手动指定，基本同理
grid-auto-rows: auto / 100px 前者即为元素本身高度，后者为定高
gird-template-rows 优先级高于 grid-auto-rows，未被前者指定的宽度将使用后者的规则
grid-row-gap: 20px 手动指定行距

合并单元格

描述每一个单元格的位置信息
- 在涉及合并的表格中。需要手动描述每一个单元格的范围信息
- 以分割线为单位计量（也可以理解为前闭后开？）
- 列
  - grid-column-start
  - grid-column-end
  - 简写 gird-column: start/end，跨度为1时可以只写 start
- 行
  - grid-row-start
  - grid-row-end
  - 简写 grid-row: start / end，跨度为1时可以只写 start

在父元素中划分 grid-area（一个 3*2 的例子）

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header" - 弃用右边格子可以用 "header ." - 这样右侧将闲置
        "sidebar content"
        "footer footer"
}
header {
    grid-area: header;
}
.side-bar {
    grid-area: sidebar;
}
.content {
    grid-area: content;
}
footer {
    grid-area: footer;
}