本篇简单介绍了 css 布局体系。包括 Flow layout、display、floats、position

Flow layout(Normal Flow)

CSS FormattingContext 分为两大类：

• Flow Layout（流式布局）： BFC（Block Formatting Context 块级格式化上下文 ）IFC（Inline Formatting Context 行内格式化上下文）
• 非流式布局: FFC（Flexbox Formatting Context）GFC（Grid Formatting Context）TableFC（Table Formatting Context）等

Flow layout 指浏览器在 不施加任何额外布局特性（如 float、position、display）时，根据 HTML 源码顺序排布元素的默认方式，有 block 和 inline 两种

在 flow layout 中，有如下特点：

• out-of-flow 元素：root元素、floats元素和 absolutely positioned 元素（position: absolute/fixed）
• out-of-flow 元素会创建新的BFC，不参与原来的格式化上下文
• BFC 和 IFC 只对 in-flow 元素进行布局
• IFC 只能包含在 BFC 中
• 如果 IFC 和 非IFC 同时存在，则需要添加 Anonymous FC，使得 IFC 作为一个整体 children 存在。具体看 webcore-rendering-ii-blocks-and-inlines/

BlockFormattingContext 有如下特点

• 布局：垂直排列，边缘对齐(LTR 左边缘对齐；RTL 右边缘对齐)
• 可以包含 floats 元素: 即所有的 float 元素都会被保护在 BFC 中
• 创建条件：见文档
• BFC 生成 block-box，有如下特点 margin 折叠：BFC 中相邻块级框之间的垂直边距会折叠，取比较大的那个只 可设置宽高。默认宽度占满父元素可用宽度，高度由内容撑开。

InlineFormattingContext (IFC) 有如下特点

• 布局：行内元素水平排列，一行一行处理、空间不足时自动换行；
• IFC 生成 inline-box，有如下特点 box 属性：水平方向的 margin、border、padding 有效，垂直方向无效 它们的盒模型尺寸主要由内容决定，不能设置 width/height

打破 Flow layout

在默认文档流里，元素按照「块级自上而下 / 行内自左向右」排版。要制造多栏、悬浮、吸顶等效果，就需要让某些元素跳出或改变它们在普通流中的角色。CSS 提供了三个关键属性：display、position、float。

display position float 有以下优先级

1. display: none

• 则 position 和 float 都不适用
• 元素不会生成任何盒子，完全从布局中移除

2. position: absolute/fixed

• 盒子变为绝对定位，float 的计算值强制设为 none
• display 按照如下规则修正

3. float 不为 none

• 盒子变为浮动
• display 按照如下规则修正

4. 其他情况

• display 按照如下规则修正

display

CSS Display Module Level 3 引入了双值语法，格式为：

display: [ <display-outside> || <display-inside> ] | <display-legacy>

<display-outside> = 
  block   |
  inline  |
  run-in  

<display-inside> = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

<display-legacy> = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid

注:

• display: <display-inside> = display: block <display-inside>
• display: <display-outside> = display: <display-outside> flow
• display: inline-block = display: inline flow-root

外部显示类型 (<display-outside>)

外部显示类型决定元素在流式布局（flow layout）中的角色，垂直还是水平排列

• block: 元素生成 block box，在正常流前后生成换行
• inline: 元素生成一个或多个 inline boxes。如果空间足够，不换行。
• run-in: 元素生成一个 run-in box，这是一种具有特殊行为的 inline-level-box ，试图将其合并到后续的块容器中。

注: 非流式布局（flex、grid）会覆盖默认的 flow-layout。此时 display-outside 不起作用。

内部显示类型 (<display-inside>)

内部显示类型决定元素如何布局其子元素，及其自身是 inline-box 还是 block-box。

• flow: 默认值。元素使用流式布局（块向和行向布局）来排布其内容 如果外部显示类型是 inline，且参与 flow-layout，则生成 inline-box。否则生成 block-box 根据其他CSS属性（如 position、float、overflow）和元素自身参与的格式上下文，可能建立新的块级格式化上下文（BFC）或将内容集成到父级格式上下文中
• flow-root: 生成 block-box，建立新的块级格式化上下文（BFC）
• flex: 元素表现得像 block-box，使用flexbox模型布局子元素，建立弹性格式化上下文（FFC）
• grid: 元素表现得像 block-box，使用grid模型布局子元素，建立网格格式化上下文（GFC）
• table: 元素表现得像HTML <table> 元素，定义块级盒子，建立表格格式化上下文（TFC）
• ruby: 元素表现得像 inline-box，使用ruby格式模型布局子元素，类似HTML <ruby> 元素，建立ruby格式化上下文

Flex 布局

Flex（弹性盒子布局）是一种一维布局方法，专门用于在容器中分配空间和对齐项目。它特别适用于创建响应式的组件布局和处理不同尺寸的项目。

基本概念

HTML 元素层面

• Flex Container（弹性容器）：应用了 display: flex 或 display: inline-flex 的HTML元素。弹性容器为其内容建立新的弹性格式化上下文。
• Flex Item（弹性项）：弹性容器的直接子元素。这些HTML元素在弹性容器中按照弹性布局规则排列。

弹性布局系统层面

• Main Axis（主轴）：弹性容器的主要方向轴，弹性项目沿着主轴排列
• Cross Axis（交叉轴）：垂直于主轴的方向轴
• Main Start/End（主轴起点/终点）：主轴的开始和结束位置
• Cross Start/End（交叉轴起点/终点）：交叉轴的开始和结束位置

核心CSS属性

.container {
  display: grid; /* 创建块级网格容器 */
  display: inline-grid; /* 创建内联网格容器 */
}

弹性容器

• flex-direction: 设置主轴方向，决定弹性项的排列方向

.container {
  flex-direction: row;         /* 默认：主轴为水平方向，从左到右 */
  flex-direction: row-reverse; /* 主轴为水平方向，从右到左 */
  flex-direction: column;      /* 主轴为垂直方向，从上到下 */
  flex-direction: column-reverse; /* 主轴为垂直方向，从下到上 */
}

• flex-wrap: 控制弹性项是否换行以及换行方式

.container {
  flex-wrap: nowrap;   /* 默认：不换行，项目可能溢出 */
  flex-wrap: wrap;     /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
  
  /* 简写属性 */
  flex-flow: row wrap; /* flex-direction flex-wrap */
}

弹性项

• flex-grow / flex-shrink / flex-basis: 控制弹性项的伸缩行为和基础尺寸

.item {
  /* 分别设置 */
  flex-grow: 0;     /* 默认：不放大 */
  flex-shrink: 1;   /* 默认：可以缩小 */
  flex-basis: auto; /* 默认：项目本来大小 */
  
  /* 简写属性 */
  flex: 1;          /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  flex: 0 1 auto;   /* 默认值：flex-grow flex-shrink flex-basis */
  flex: none;       /* flex: 0 0 auto; 不伸缩 */
  flex: auto;       /* flex: 1 1 auto; 完全弹性 */
  
  /* 常用模式 */
  flex: 1;          /* 平均分配剩余空间 */
  flex: 2;          /* 获得2倍的剩余空间 */
  flex: 0 0 200px;  /* 固定宽度，不伸缩 */
}

• order: 改变弹性项的视觉顺序，不影响DOM结构

.item {
  order: 0; /* 默认：按DOM顺序 */
  order: -1; /* 排在前面 */
  order: 1;  /* 排在后面 */
}

对齐属性

• justify-content：控制弹性项在主轴上的对齐方式
• align-items: 控制弹性项在交叉轴上的对齐方式
• align-content: 当有多行弹性项时，控制行在交叉轴上的对齐方式
• align-self

Grid 布局

CSS Grid 是一种强大的二维布局系统，它为创建复杂的网页布局提供了灵活且直观的解决方案。与 Flexbox 专注于一维布局不同，Grid 能够同时处理行和列，让开发者能够轻松创建复杂的网格布局。

基本概念

HTML 元素层面

• Grid Container（网格容器）：应用了 display: grid 或 display: inline-grid 的HTML元素。网格容器为其内容建立新的网格格式化上下文。
• Grid Item（网格项）：网格容器的直接子元素。这些HTML元素被分配到网格区域中，使用网格定位属性来确定其在网格中的位置。

网格布局系统层面

• Grid（网格）：由相交的水平和垂直网格线组成的二维系统，将容器空间划分为网格区域供网格项放置。
• Grid Line（网格线）：网格的分割线，分为行网格线和列网格线
• 行网格线：沿着内联轴（通常为水平方向）延伸，定义网格行的边界
• 列网格线：沿着块轴（通常为垂直方向）延伸，定义网格列的边界
• 每条网格线都可以通过数字索引或自定义名称来引用
• Grid Track（网格轨道）：网格列或网格行的通用术语，是两条相邻网格线之间的空间。
• 每个网格轨道都被分配一个尺寸函数，该函数控制列或行可以增长的宽度或高度
• 相邻的网格轨道可以通过间距分隔，但在其他情况下会紧密排列
• Grid Cell（网格单元）：网格行和网格列的交集。
• 网格中可以在定位网格项时引用的最小单位
• 每个网格单元都有唯一的位置坐标
• Grid Area（网格区域）：用于布局一个或多个网格项的逻辑空间。
• 网格区域由一个或多个相邻的网格单元组成
• 它由四条网格线界定（每一侧一条），并参与其相交的网格轨道的尺寸计算

核心CSS属性

.container {
  display: grid; /* 创建块级网格容器 */
  display: inline-grid; /* 创建内联网格容器 */
}

显式网格定义

• grid-template-columns / grid-template-rows: 定义网格轨道大小，同时隐式创建网格线

.container {
  /* 基础用法：定义网格轨道 */
  grid-template-columns: 100px 200px 100px; /* 3条列轨道 */
  grid-template-rows: 50px 100px; /* 2条行轨道 */
  
  /* 命名网格线：为网格线命名以便引用 */
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: [header-start] 60px [header-end content-start] 1fr [content-end];
  
  /* fr 单位：按比例分配可用空间 */
  grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 比例的3条轨道 */
  
  /* repeat() 函数：重复模式 */
  grid-template-columns: repeat(3, 1fr); /* 重复创建3条等宽轨道 */
  grid-template-columns: repeat(4, [col-start] 100px [col-end]); /* 重复轨道和网格线名 */
  
  /* 响应式轨道：根据容器大小自动调整 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列数 */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 填充式布局 */
}

• grid-template-areas: 通过命名定义网格区域，将多个网格单元组合成逻辑区域

.container {
  /* 定义命名的网格区域 */
  grid-template-areas: 
    "header header header"    /* header区域占用3个网格单元 */
    "sidebar main main"       /* sidebar占1个，main占2个网格单元 */
    "footer footer footer";   /* footer区域占用3个网格单元 */
  
  /* 配合轨道定义使用 */
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 40px;
}

隐式网格定义

• grid-auto-columns / grid-auto-rows: 定义隐式网格轨道的大小，当网格项超出显式网格范围时自动创建

.container {
  /* 显式定义2列网格 */
  grid-template-columns: repeat(2, 100px);
  
  /* 当网格项被放置到第3列以外时，自动创建的列轨道宽度为50px */
  grid-auto-columns: 50px;
  
  /* 当网格项被放置到显式行以外时，自动创建的行轨道高度 */
  grid-auto-rows: minmax(100px, auto); /* 最小100px，内容自适应 */
  grid-auto-rows: 80px; /* 固定高度 */
}

• grid-auto-flow: 控制网格项在网格中的自动放置算法

.container {
  /* 网格项放置方向 */
  grid-auto-flow: row;    /* 默认：优先填充行，行满后换到下一行 */
  grid-auto-flow: column; /* 优先填充列，列满后换到下一列 */
  
  /* 紧密排列算法 */
  grid-auto-flow: row dense;    /* 按行填充，回填前面的空隙 */
  grid-auto-flow: column dense; /* 按列填充，回填前面的空隙 */
}

网格项定位

• 使用网格线序号定位: 通过指定网格线位置，将网格项放置到特定的网格区域

.item {
  /* 方式1：使用网格线序号（从1开始） */
  grid-column-start: 1;  /* 从第1条列网格线开始 */
  grid-column-end: 3;    /* 到第3条列网格线结束 */
  grid-row-start: 2;     /* 从第2条行网格线开始 */
  grid-row-end: 4;       /* 到第4条行网格线结束 */
  
  /* 方式2：简写形式 */
  grid-column: 1 / 3;    /* 从列线1到列线3 */
  grid-row: 2 / 4;       /* 从行线2到行线4 */
  
  /* 方式3：跨越指定数量的轨道 */
  grid-column: span 2;   /* 从当前位置跨越2条列轨道 */
  grid-row: span 3;      /* 从当前位置跨越3条行轨道 */
  
  /* 方式4：最简写 */
  grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
}

• 使用命名网格线定位: 通过网格线名称将网格项放置到特定位置

/* 前提：在网格容器中定义了命名网格线 */
.container {
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: [header-start] 60px [header-end content-start] 1fr [content-end];
}

.item {
  /* 方式1：使用命名网格线 */
  grid-column-start: sidebar-start;  /* 从名为sidebar-start的列网格线开始 */
  grid-column-end: main-end;         /* 到名为main-end的列网格线结束 */
  grid-row-start: header-start;      /* 从名为header-start的行网格线开始 */
  grid-row-end: content-end;         /* 到名为content-end的行网格线结束 */
  
  /* 方式2：简写形式 */
  grid-column: sidebar-start / main-end;    /* 从sidebar-start到main-end */
  grid-row: header-start / content-end;     /* 从header-start到content-end */
  
  /* 方式3：混合使用命名网格线和序号 */
  grid-column: sidebar-start / 3;           /* 从命名线到第3条网格线 */
  grid-row: 1 / content-end;                /* 从第1条网格线到命名线 */
  
  /* 方式4：命名网格线与span结合 */
  grid-column: sidebar-start / span 2;      /* 从sidebar-start开始跨越2个轨道 */
  
  /* 方式5：重名网格线的处理 */
  grid-column: main-start 2;                /* 如果有多条main-start线，选择第2条 */
}

• grid-column/row-* 智能回退规则：当找不到对应的网格线时，会查找 [ident]-start/end 网格线

.item {
  grid-column-start: header;        /* 查找header失败，查找 header-start */
  grid-column-end: header;        /* 查找header失败，查找 header-end */
}

• 使用命名网格区域定位: 通过网格区域名称直接将网格项定位到预定义的区域。本质上也是网格线定位。

/* grid-template-areas 会为每个命名区域自动生成对应的网格线名称 */
.container {
  grid-template-areas: "header header header";
  /* 自动生成：header-start 和 header-end 网格线 */
}

/* 网格项通过区域名称直接定位 */
/* 自动定位到header区域。本质上是查找 header-start header-end 网格线组成的区域 */
.header { grid-area: header; }

对齐属性

见 盒模型对齐属性

盒模型对齐属性（Box Alignment）

根据 CSS Box Alignment Module Level 3 规范，盒模型对齐属性为各种CSS布局模型（块布局、表格布局、弹性布局和网格布局）提供了统一的对齐控制。

轴线概念（Axis Concepts）

在理解对齐属性之前，需要先了解CSS中的轴线概念。不同的布局模型使用不同的轴线术语，但它们都基于文档的书写模式。

逻辑轴线（Logical Axes）

• 内联轴（Inline Axis）：文本书写方向的轴线
• 块轴（Block Axis）：块元素堆叠方向的轴线

书写模式对轴线的影响

/* 水平书写模式（默认） */
.horizontal {
  writing-mode: horizontal-tb;
  /* 内联轴：水平方向（左→右） */
  /* 块轴：垂直方向（上→下） */
}

/* 垂直书写模式 */
.vertical {
  writing-mode: vertical-rl;
  /* 内联轴：垂直方向（上→下） */
  /* 块轴：水平方向（右→左） */
}

.vertical-lr {
  writing-mode: vertical-lr;
  /* 内联轴：垂直方向（上→下） */
  /* 块轴：水平方向（左→右） */
}

不同的布局对应的轴线

对齐关键字（Alignment Keywords）

对齐关键字定义了元素在容器中的对齐方式，这些关键字在不同的对齐属性中通用。

• 位置对齐关键字（Positional Alignment）

/* 逻辑方向关键字（考虑书写方向） */
.container {
  justify-content: start;  /* 起点对齐 */
  justify-content: end;    /* 终点对齐 */
  justify-content: center; /* 居中对齐 */
}

/* 物理方向关键字（仅部分属性支持） */
.container {
  justify-content: left;  /* 物理左侧 */
  justify-content: right; /* 物理右侧 */
}

• 基线对齐关键字（Baseline Alignment）

.container {
  align-items: baseline;       /* 基线对齐 */
  align-items: first baseline; /* 首行基线对齐 */
  align-items: last baseline;  /* 末行基线对齐 */
}

• 分布对齐关键字（Distributed Alignment）

.container {
  justify-content: stretch;      /* 拉伸填满 */
  justify-content: space-between; /* 两端对齐，项目间间隔相等 */
  justify-content: space-around;  /* 环绕分布，项目两侧间隔相等 */
  justify-content: space-evenly;  /* 均匀分布，所有间隔都相等 */
}

• 溢出对齐关键字（Overflow Alignment）

.container {
  /* 安全对齐：防止内容溢出不可见 */
  align-content: safe center;     /* 如果居中会导致溢出，则回退到起点对齐 */
  justify-content: unsafe center; /* 强制居中，即使会导致溢出 */
}

内容分布（Content Distribution）

内容分布属性控制容器内容作为整体在容器中的对齐方式。

• justify-content: 控制内容在内联轴（主轴）上的分布
• align-content: 控制内容在块轴（交叉轴）上的分布
• 简写: place-content: <align-content> <justify-content>

自身对齐（Self Alignment）

自身对齐属性控制单个项目在其分配的空间内的对齐方式。

• justify-self: 控制项目在内联轴方向的自身对齐
• align-self: 控制项目在块轴方向的自身对齐
• 简写: place-self: <align-self> <justify-self>

默认对齐（Default Alignment）

默认对齐属性设置容器内所有项目的默认对齐方式。

• justify-items: 设置所有项目在内联轴方向的默认对齐
• align-items: 设置所有项目在块轴方向的默认对齐
• 简写: place-items: <align-items> <justify-items>

间距（Gaps Between Boxes）

间距属性在容器项目之间创建固定的空白空间。

• row-gap
• column-gap
• 简写: gap: <row-gap> <column-gap>