Frontend►CSS

011-Flex布局

Flex 布局详解

Flex 布局（Flexible Box Layout）是 CSS3 中一种现代的布局方式，它提供了一种更有效的方式来对容器中的项目进行排列、对齐和分配空间，即使它们的大小是未知或动态的。

[万字长文]一文教你彻底搞懂flex布局_flex 分行-CSDN博客

一、Flex 布局基本概念

Flex 布局由**弹性容器（Flex Container）和弹性项目（Flex Items）**组成：

  • Flex Container（弹性容器）：通过设置 display: flex 或 display: inline-flex 的元素
  • Flex Items（弹性项目）：弹性容器的直接子元素

二、Flex 容器属性

1. display

定义容器使用 Flex 布局：

1
2
3
4
.container {
  display: flex; /* 块级弹性容器 */
  display: inline-flex; /* 行内弹性容器 */
}

2. flex-direction

决定主轴方向（项目的排列方向）：

1
2
3
4
5
6
.container {
  flex-direction: row; /* 默认值，水平方向，从左到右 */
  flex-direction: row-reverse; /* 水平方向，从右到左 */
  flex-direction: column; /* 垂直方向，从上到下 */
  flex-direction: column-reverse; /* 垂直方向，从下到上 */
}

3. flex-wrap

定义项目是否换行：

1
2
3
4
5
.container {
  flex-wrap: nowrap; /* 默认值，不换行 */
  flex-wrap: wrap; /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
}

4. flex-flow

flex-direction 和 flex-wrap 的简写：

1
2
3
.container {
  flex-flow: row nowrap; /* 默认值 */
}

5. justify-content

定义项目在主轴上的对齐方式：

1
2
3
4
5
6
7
8
.container {
  justify-content: flex-start; /* 默认值，左对齐 */
  justify-content: flex-end; /* 右对齐 */
  justify-content: center; /* 居中 */
  justify-content: space-between; /* 两端对齐，项目间间隔相等 */
  justify-content: space-around; /* 每个项目两侧间隔相等 */
  justify-content: space-evenly; /* 项目间和边缘间隔完全相等 */
}

6. align-items

定义项目在交叉轴上的对齐方式：

1
2
3
4
5
6
7
.container {
  align-items: stretch; /* 默认值，拉伸填满容器高度 */
  align-items: flex-start; /* 交叉轴起点对齐 */
  align-items: flex-end; /* 交叉轴终点对齐 */
  align-items: center; /* 交叉轴中点对齐 */
  align-items: baseline; /* 项目第一行文字的基线对齐 */
}

7. align-content

定义多根轴线的对齐方式（只有一根轴线时无效）：

1
2
3
4
5
6
7
8
.container {
  align-content: stretch; /* 默认值，轴线占满整个交叉轴 */
  align-content: flex-start; /* 交叉轴起点对齐 */
  align-content: flex-end; /* 交叉轴终点对齐 */
  align-content: center; /* 交叉轴中点对齐 */
  align-content: space-between; /* 两端对齐，轴线间间隔相等 */
  align-content: space-around; /* 每根轴线两侧间隔相等 */
}

三、Flex 项目属性

1. order

定义项目的排列顺序，数值越小越靠前：

1
2
3
.item {
  order: 0; /* 默认值 */
}

2. flex-grow

定义项目的放大比例（剩余空间分配）：

1
2
3
.item {
  flex-grow: 0; /* 默认值，不放大 */
}

3. flex-shrink

定义项目的缩小比例（空间不足时）：

1
2
3
.item {
  flex-shrink: 1; /* 默认值，空间不足时缩小 */
}

4. flex-basis

定义项目在分配多余空间之前的主轴尺寸：

1
2
3
4
.item {
  flex-basis: auto; /* 默认值，项目本来的大小 */
  flex-basis: 100px; /* 固定值 */
}

5. flex

写法 等价于 效果
flex: 1 flex: 1 1 0% 完全按比例分配空间
flex: auto flex: 1 1 auto 考虑项目自身尺寸后再分配剩余空间
flex: none flex: 0 0 auto 不放大不缩小，保持原有尺寸
flex: initial flex: 0 1 auto 默认值，可缩小但不放大

flex-grow, flex-shrink 和 flex-basis 的简写：

1
2
3
4
5
.item {
  flex: none; /* 0 0 auto */
  flex: auto; /* 1 1 auto */
  flex: 1; /* 1 1 0% */
}

6. align-self

允许单个项目有与其他项目不同的对齐方式：

1
2
3
4
5
6
7
8
.item {
  align-self: auto; /* 默认值，继承父容器的align-items */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

四、Flex 布局常见应用场景

1. 水平垂直居中

1
2
3
4
5
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 等分布局

1
2
3
4
5
6
.container {
  display: flex;
}
.item {
  flex: 1;
}

3. 圣杯布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container {
  display: flex;
  flex-direction: column;
}
.header, .footer {
  height: 60px;
}
.content {
  display: flex;
  flex: 1;
}
.main {
  flex: 1;
}
.aside {
  width: 200px;
}

4. 流式布局

1
2
3
4
5
6
7
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 25%; /* 每行4个 */
}

五、Flex 布局注意事项

  1. Flex 布局对浮动(float)、清除浮动(clear)和垂直对齐(vertical-align)无效
  2. 某些旧版浏览器需要前缀（-webkit-、-moz-等）
  3. 嵌套 Flex 容器时要注意性能问题
  4. 移动端对 Flex 布局支持良好，是移动端布局的首选方案

Flex 布局极大地简化了复杂布局的实现，是现代 Web 开发中必不可少的布局技术。掌握 Flex 布局可以让你更高效地创建响应式、灵活的页面结构。

Frontend►CSS

012-flex数值与Flex子属性

flex: 1 详解与 Flex 子项属性解析

一、flex: 1 的完整含义

flex: 1 是 flex-grow、flex-shrink 和 flex-basis 的简写形式，其完整等价于：

1
2
3
4
5
flex: 1 1 0;
/* 等价于 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

二、三大核心属性详解

1. flex-grow（扩展比例）

定义：当容器有剩余空间时，子项的分配比例
特点：

  • 默认值：0（不扩展）
  • 必须是非负数字
  • 按比例分配剩余空间

示例：

1
2
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }

→ 剩余空间按 1:2 分配

2. flex-shrink（收缩比例）

定义：当空间不足时，子项的收缩比例
特点：

  • 默认值：1（允许收缩）
  • 必须是非负数字
  • 0 表示不收缩（类似 flex-shrink: none）

计算方式：

实际收缩量 = (子项原始尺寸 × flex-shrink值) / ∑(所有子项原始尺寸 × flex-shrink值) × 溢出空间

3. flex-basis（基准尺寸）

定义：子项在分配多余空间之前的初始尺寸
特点：

  • 默认值：auto（取元素自身尺寸）
  • 可设为具体值（200px、20%等）或 0
  • 当设置为 0 时，会忽略元素自身尺寸

三、flex 简写形式对照表

简写形式 等价完整形式 说明
flex: initial 0 1 auto 默认值，不扩展但可收缩
flex: auto 1 1 auto 完全弹性，基准为内容尺寸
flex: none 0 0 auto 完全刚性，不伸缩
flex: 1 1 1 0 完全弹性，基准为0
flex: 2 1 2 1 0 扩展系数2，基准为0
flex: 1 100px 1 1 100px 基准100px，可伸缩

四、深度解析 flex: 1 的特性

1. 空间分配机制

1
2
3
4
5
<div class="container">
  <div class="item" style="flex: 1">A</div>
  <div class="item" style="flex: 2">B</div>
  <div class="item" style="flex: 1">C</div>
</div>
  • 总比例：1 + 2 + 1 = 4
  • 剩余空间分配：
    • A 获得 1/4
    • B 获得 2/4
    • C 获得 1/4

2. 与 flex-basis: 0 的关系

flex: 1 的 flex-basis: 0 会导致：

  • 忽略元素内容宽度
  • 完全按比例分配空间
  • 实现真正均匀分布（不同于 flex: auto）

3. 与 flex-grow: 1 的区别

1
2
3
4
5
/* 情况1 */
.item { flex-grow: 1; } /* flex-shrink: 1, flex-basis: auto */

/* 情况2 */
.item { flex: 1; } /* flex-shrink: 1, flex-basis: 0 */

区别：

  • 情况1 会受元素内容影响
  • 情况2 完全按比例分配

五、常见应用场景

1. 等分布局

1
2
3
4
5
6
.container {
  display: flex;
}
.item {
  flex: 1; /* 完全等分 */
}

2. 主内容自适应

1
2
3
4
5
6
.sidebar {
  flex: 0 0 200px; /* 固定宽度 */
}
.main {
  flex: 1; /* 占据剩余空间 */
}

3. 响应式网格

1
2
3
.grid-item {
  flex: 1 0 250px; /* 最小250px，可扩展 */
}

六、常见误区与注意事项

  1. flex-basis 与 width 的优先级：

    • 在Flex布局中，flex-basis 会覆盖 width
    • 除非 flex-basis: auto

  2. 最小内容尺寸限制：

    • 即使 flex-basis: 0，也不会小于内容最小宽度
    • 可加 min-width: 0 强制收缩

  3. 性能考虑：

    • 避免过度嵌套Flex容器
    • flex: 1 比 flex-grow: 1 性能稍优（浏览器优化）

  4. IE11 兼容性：

    • IE11 对 flex-basis: 0 支持有问题
    • 需写成 flex: 1 1 0px

通过深入理解这些属性，可以精准控制Flex布局中的空间分配，实现各种复杂的自适应布局效果。