都2025年了还不会flex？一篇文章带你理顺flex！

chimpro
1 阅读5分钟

Flexbox，全称 Flexible Box Layout Model（弹性盒子布局模型），是 CSS3 中引入的一种强大的、用于在用户界面中进行元素排列、对齐和空间分配的一维布局模型。它的出现极大地简化了许多过去需要依赖 float、position 和 table 布局才能实现的复杂布局，尤其是响应式设计。

核心思想是让“容器”能够决定其“项目”的宽度、高度和顺序，以便最好地填充可用空间。

1. Flexbox 的核心概念

要掌握 Flexbox，首先要理解它的两个核心组件和两个轴。

核心组件

  1. Flex 容器 (Flex Container) ：应用了 display: flex 或 display: inline-flex 的父元素。它是所有弹性项目活动的主舞台。
  2. Flex 项目 (Flex Item) ：Flex 容器的直接子元素。容器内的所有文本节点也会被视为弹性项目。

两根轴线

Flexbox 布局是基于两根轴线工作的，这是它与基于块级（垂直）和内联（水平）方向的传统布局模型的最大区别。

  1. 主轴 (Main Axis) ：Flex 项目默认沿着主轴排列。它的方向不固定，由 flex-direction 属性决定。

    • flex-direction: row (默认)：主轴是水平方向，从左到右。
    • flex-direction: column：主轴是垂直方向，从上到下。

  2. 交叉轴 (Cross Axis) ：与主轴垂直的轴线。它的方向也随主轴而变。

    • 当主轴是水平方向时，交叉轴就是垂直方向。
    • 当主轴是垂直方向时，交叉轴就是水平方向。
<style>
.flex-container{
    display:flex
    flex-direction:row //默认
}
</style>

<div class="flex-container">  
    <div class="flex-item">a</div>
    <div class="flex-item">b</div> 
    <div class="flex-item">c</div> 
</div>

image.png

2. Flex 容器 (Container) 的属性

这些属性设置在父容器上，用于控制其内部所有项目的整体布局。

display

这是启用 Flexbox 的开关。

  • display: flex;：将元素变为块级的 Flex 容器。
  • display: inline-flex;：将元素变为内联级的 Flex 容器（容器本身可以和文字等内联元素排在一行）。

flex-direction

决定主轴的方向，即项目排列的方向。

  • row (默认)：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

示例：

CSS

.container {
  flex-direction: column; /* 项目将从上到下排列 */
}

image.png

flex-wrap

定义当一条轴线排不下所有项目时，如何换行。

  • nowrap (默认)：不换行。如果项目总宽度超过容器，它们会被强制压缩。
  • wrap：换行。第一个项目在第一行，后续排不下的项目会换到下一行。
  • wrap-reverse：反向换行。第一个项目在最后一行，排不下的项目会换到上一行。

示例：

CSS

.container {
  flex-wrap: wrap; /* 允许项目在需要时换行 */
}

flex-flow

这是 flex-direction 和 flex-wrap 的简写形式。

CSS

语法: flex-flow: <flex-direction> <flex-wrap>; 
.container {
  flex-flow: row wrap; /* 主轴水平，并且允许换行 */
}

justify-content

定义项目在主轴上的对齐方式。这是最常用的属性之一。

  • flex-start (默认)：向主轴起点对齐。
  • flex-end：向主轴终点对齐。
  • center：在主轴上居中对齐。
  • space-between：两端对齐。第一个项目在起点，最后一个项目在终点，剩余项目平均分布空间。
  • space-around：每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。
  • space-evenly：所有项目之间的间隔，以及项目与边框的间隔，都完全相等。

align-items

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

  • stretch (默认)：如果项目未设置高度（或宽度，取决于交叉轴方向），将占满整个容器的高度（或宽度）。
  • flex-start：向交叉轴起点对齐。
  • flex-end：向交叉轴终点对齐。
  • center：在交叉轴上居中对齐。
  • baseline：项目的第一行文字的基线对齐。

3. Flex 项目 (Item) 的属性

这些属性设置在子项目上，用于控制单个项目的行为。
以下所有案例默认父元素display:flex

order

定义项目的排列顺序。数值越小，排列越靠前，默认为 0。可以是负数。

示例：

HTML

<div class="container">
  <div style="order: 3;">第一个写的元素</div>
  <div style="order: 1;">第二个写的元素</div>
  <div style="order: 2;">第三个写的元素</div>
</div>

最终显示顺序会是：第二个 -> 第三个 -> 第一个。

flex-grow

父容器剩余空间的争抢系数。默认为 0，即如果存在剩余空间，也不争抢。

  • 如果所有项目的 flex-grow 都为 1，它们将平分剩余空间。
  • 如果一个项目的 flex-grow 为 2，其他项目都为 1，则前者获取的剩余空间将是后者的两倍。

这是实现多栏等宽布局的关键。

flex-shrink

父容器剩余空间的退让系数。默认为 1，即如果空间不足，该项目将退让。

  • 如果所有项目的 flex-shrink 都为 1，当空间不足时，它们将等比例缩小。
  • 如果一个项目的 flex-shrink 为 0，其他项目都为 1，则空间不足时，前者不缩小，其余项目缩小。

flex-basis

每个子容器的初始大小，设置为0，就代表大小由父容器剩余空间和其他子容器决定

flex

这是 flex-grow, flex-shrink 和 flex-basis 的简写形式，是最重要、最常用的项目属性。

CSS

/* 语法: flex: <flex-grow> <flex-shrink> <flex-basis>; */

示例：实现三栏等宽布局（flex1）

HTML

<div class="container">
  <div class="column">左</div>
  <div class="column">中</div>
  <div class="column">右</div>
</div>

CSS

.container { display: flex; }
.column {
  flex: 1; /* 等同于 flex: 1 1 0; */
  border: 1px solid;
}

因为每个项目的 flex-basis 都是 0，即每个子项目占用的初始空间为0，剩余空间为整个父元素所占空间，flex-grow 都是 1，即争抢系数都是1，它们将都以1的争抢系数来争抢剩余空间，也就是平分剩余空间

reference

本文图片与例子出自mdn
flex 布局的基本概念 - CSS：层叠样式表 | MDN
flex 布局的基本概念 - CSS：层叠样式表 | MDN

avatar
文章
阅读
粉丝