Skip to content

布局

约 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 手动指定行距

合并单元格

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