前端学习——css——flexbox篇

原创

已于 2025-09-11 10:52:47 修改 · 776 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #css

于 2025-09-11 10:34:36 首次发布

前端学习——css——flexbox篇

一、Flexbox核心概念
- 1.1 容器的两根轴线
- 1.2 项目的排列规则
二、Flex 容器属性：掌控整体布局
三、Flex 项目属性：精细控制单个元素
四、案例
- 4.1 等分卡片布局
- 4.2 photo gallery

一、Flexbox核心概念

Flexbox 布局的核心在于容器（Container）和项目（Item）的关系。简单来说，当你为一个元素设置display: flex或display: inline-flex时，这个元素就成为了 Flex 容器，而它的直接子元素则自动成为 Flex 项目。这种父子关系是理解 Flexbox 的基础，所有布局操作都围绕这两者展开。

1.1 容器的两根轴线

Flexbox 布局的关键在于它的双轴系统，这也是它与传统布局最大的区别：
主轴（Main Axis）：项目排列的主要方向，默认是水平方向（从左到右）。
交叉轴（Cross Axis）：与主轴垂直的方向，默认是垂直方向（从上到下）。
你可以通过flex-direction属性修改主轴方向，这一设置会直接影响项目的排列方式和交叉轴的方向。例如，将主轴改为垂直方向后，交叉轴会自动变为水平方向。

1.2 项目的排列规则

Flex 项目会沿着主轴依次排列，并且默认不会换行（除非设置flex-wrap: wrap）。与传统的块级元素不同，Flex 项目不会独占一行，它们的宽度和高度会根据容器的空间和自身的flex属性灵活调整。这种 “弹性” 特性正是 Flexbox 名称的由来，也是它处理响应式布局的核心优势。

二、Flex 容器属性：掌控整体布局

Flex 容器提供了多个属性，用于控制项目的排列、对齐和空间分配。掌握这些属性，你就能轻松实现各种复杂的布局效果。

2.1 flex-direction：定义主轴方向

该属性决定了 Flex 项目在容器中的排列方向，共有 4 个可选值：
row（默认）：主轴水平，项目从左到右排列。
row-reverse：主轴水平，项目从右到左排列。
column：主轴垂直，项目从上到下排列。
column-reverse：主轴垂直，项目从下到上排列。
示例代码：

.container {
   
   
  display: flex;
  flex-direction: column; /* 项目垂直排列 */
}

2.2 flex-wrap：控制项目是否换行

默认情况下，Flex 项目会在一条直线上排列（不换行），如果容器空间不足，项目会被压缩。flex-wrap属性可以改变这一行为：
nowrap（默认）：不换行，项目压缩以适应容器。
wrap：换行，超出容器的项目会排列到下一行。
wrap-reverse：反向换行，超出容器的项目会排列到上一行。
实用场景：在响应式布局中，当屏幕宽度较小时，通过flex-wrap: wrap让项目自动换行，避免元素重叠或过度压缩。

2.3 justify-content：主轴上的对齐方式

该属性用于控制 Flex 项目在主轴方向上的对齐方式，是实现水平或垂直居中（取决于主轴方向）的常用属性。它有多个可选值，覆盖了几乎所有常见的对齐场景：
flex-start（默认）：项目靠主轴起点对齐。
flex-end：项目靠主轴终点对齐。
center：项目在主轴上居中对齐（常用）。
space-between：项目之间均匀分布，首尾项目靠向容器边缘。
space-around：项目之间均匀分布，首尾项目与容器边缘有相等的间距。
space-evenly：项目之间以及项目与容器边缘的间距完全相等。
示例代码：

.container {
   
   
  display: flex;
  justify-content: center; /* 项目在主轴上居中 */
}

2.4 align-items：交叉轴上的对齐方式

与justify-content对应，align-items控制 Flex 项目在交叉轴方向上的对齐方式，常用于实现垂直或水平居中（取决于交叉轴方向）：
stretch（默认）：项目拉伸以填满容器的交叉轴高度（或宽度）。
flex-start：项目靠交叉轴起点对齐。
flex-end：项目靠交叉轴终点对齐。
center：项目在交叉轴上居中对齐（常用）。
baseline：项目根据其文字基线对齐。
经典场景：实现元素的水平和垂直居中。只需将容器设置为display: flex，并同时添加justify-content: center和align-items: center，即可轻松实现，无需再依赖定位或 margin 技巧。

2.5 align-content：多线项目的交叉轴对齐

当 Flex 项目换行后（即flex-wrap: wrap），容器会出现多条 “轴线”。align-content属性用于控制这些轴线在交叉轴方向上的对齐方式（如果只有一条轴线，该属性无效）：
stretch（默认）：轴线拉伸以填满容器的交叉轴空间。
flex-start：轴线靠交叉轴起点对齐。
flex-end：轴线靠交叉轴终点对齐。
center：轴线在交叉轴上居中对齐。
space-between：轴线之间均匀分布，首尾轴线靠向容器边缘。
space-around：轴线之间均匀分布，首尾轴线与容器边缘有相等的间距。

三、Flex 项目属性：精细控制单个元素

除了容器属性，Flex 项目也有专属属性，用于调整单个项目的大小、顺序和对齐方式，让布局更加灵活可控。

3.1 flex：控制项目的弹性大小

flex属性是flex-grow、flex-shrink和flex-basis的简写，用于定义项目在容器中的 “弹性” 表现，是 Flexbox 中最核心的项目属性。其默认值为0 1 auto，分别对应三个子属性的默认值。
flex-grow：定义项目的 “增长因子”，决定项目在容器有剩余空间时如何分配额外空间。默认值为0（不增长），如果设置为1，项目会平均分配剩余空间；如果一个项目的flex-grow为2，其他项目为1，则该项目获得的额外空间是其他项目的 2 倍。
flex-shrink：定义项目的 “收缩因子”，决定项目在容器空间不足时如何压缩。默认值为1（允许收缩），如果设置为0，项目不会被压缩（即使容器空间不足，也会保持原有大小）。
flex-basis：定义项目在分配空间前的初始大小，默认值为auto（项目的原始大小），也可以设置为具体的宽度（如200px）或百分比。