【CSS】flex布局

CSS Flex布局详解

最新推荐文章于 2025-10-01 22:39:46 发布

原创最新推荐文章于 2025-10-01 22:39:46 发布 · 1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS 专栏收录该内容

3 篇文章

订阅专栏

Flex 布局（也称为 弹性盒子布局）。

Flexible Box 模型，通常称为 Flexbox，是一种为一维布局设计的 CSS 布局模式。它旨在提供一种更有效的方式来对容器中的元素进行排列、对齐和分配空间，即使它们的大小是未知或动态的。

文章目录

一、什么是 Flex 布局？

核心思想：通过赋予容器控制其子元素（弹性项目）高度/宽度和顺序的能力，来填充可用空间。其核心是让容器能够改变其子项目的宽度、高度和顺序，以最佳方式填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。

主要特征：

一维布局：Flex 布局一次只能处理一个维度（行或列）上的布局。这与处理行和列的 CSS Grid（二维布局）形成对比。
两个轴：Flex 布局基于主轴和交叉轴。
- 主轴：由 flex-direction 属性定义的方向（默认为水平，从左到右）。
- 交叉轴：与主轴垂直的方向。

二、基本概念和术语

要使用 Flex 布局，你需要理解两个基本组件：

Flex 容器：设置了 display: flex 或 display: inline-flex 的父元素。
Flex 项目：Flex 容器内的直接子元素。

<div class="flex-container">  <!-- Flex 容器 -->
  <div class="flex-item">项目 1</div>  <!-- Flex 项目 -->
  <div class="flex-item">项目 2</div>  <!-- Flex 项目 -->
  <div class="flex-item">项目 3</div>  <!-- Flex 项目 -->
</div>

三、Flex 容器的属性（作用于父元素）

这些属性控制着容器内所有项目的整体行为。

属性	作用	常用值
`display`	定义一个 Flex 容器。	`flex`（块级容器） `inline-flex`（行内容器）
`flex-direction`	定义主轴的方向，即项目的排列方向。	`row`（默认，水平从左到右）, `row-reverse`（水平从右到左）, `column`（垂直从上到下）, `column-reverse`（垂直从下到上）
`flex-wrap`	定义项目是否换行。	`nowrap`（默认，不换行）, `wrap`（换行）, `wrap-reverse`（反向换行）
`justify-content`	定义项目在主轴上的对齐方式。	`flex-start`（默认，左对齐）, `flex-end`（右对齐）, `center`（居中）, `space-between`（两端对齐，项目间间隔相等）, `space-around`（每个项目两侧的间隔相等）, `space-evenly`（项目与项目、项目与边框的间隔都相等）
`align-items`	定义项目在交叉轴上的对齐方式（单行）。	`stretch`（默认，拉伸填满容器高度）, `flex-start`（顶部对齐）, `flex-end`（底部对齐）, `center`（垂直居中）, `baseline`（按项目第一行文字的基线对齐）
`align-content`	定义了多根轴线的对齐方式（多行）。如果项目只有一根轴线，该属性不起作用。	`stretch`, `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`

flex-flow 简写属性：是 flex-direction 和 flex-wrap 的简写形式。

语法：flex-flow: <flex-direction> || <flex-wrap>;
示例：flex-flow: row wrap;

四、Flex 项目的属性（作用于子元素）

这些属性控制单个项目在容器内的行为。

属性	作用	常用值
`order`	定义项目的排列顺序。数值越小，排列越靠前，默认为 0。	`<integer>`（整数，如 -1, 0, 1, 2）
`flex-grow`	定义项目的放大比例，默认为 0（即如果存在剩余空间，也不放大）。	`<number>`（数字，如 0, 1, 2）
`flex-shrink`	定义项目的缩小比例，默认为 1（即如果空间不足，该项目将缩小）。	`<number>`（数字，如 0, 1, 2）
`flex-basis`	定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性计算是否有多余空间。	`auto`（默认，项目本来的大小）, `长度值`（如 `20%`, `250px`）
`align-self`	允许单个项目有与其他项目不一样的对齐方式，可覆盖 `align-items` 属性。	`auto`（继承父容器的 `align-items`）, `stretch`, `flex-start`, `flex-end`, `center`, `baseline`

flex 简写属性：是 flex-grow, flex-shrink 和 flex-basis 的简写。

语法：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
推荐使用简写，因为它可以智能地设置其他值。
常用值：
- flex: initial：等同于 flex: 0 1 auto。（不放大，可缩小，初始大小）
- flex: auto：等同于 flex: 1 1 auto。（可放大，可缩小）
- flex: none：等同于 flex: 0 0 auto。（不放大，不缩小）
- flex: 1：等同于 flex: 1 1 0%。（常用，平均分配空间）

五、一个完整的示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        .container {
            display: flex; /* 定义 Flex 容器 */
            flex-direction: row; /* 主轴为水平方向 */
            flex-wrap: wrap; /* 允许换行 */
            justify-content: space-around; /* 主轴对齐方式 */
            align-items: center; /* 交叉轴对齐方式（单行） */
            height: 200px;
            background-color: #f0f0f0;
        }
        .item {
            flex: 1; /* 每个项目可伸缩，平均分配空间 */
            min-width: 100px; /* 设置最小宽度，防止过小 */
            height: 60px;
            margin: 10px;
            background-color: tomato;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        .item-special {
            flex: 2; /* 这个项目占据的空间是其他的两倍 */
            background-color: steelblue;
            align-self: flex-end; /* 这个项目自己底部对齐 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item item-special">3 (特殊)</div>
        <div class="item">4</div>
    </div>
</body>
</html>