CSS篇：flex 布局👈👈👈

浪遏
0 阅读8分钟

认识 flex 布局

Flex布局 ： 简单通过容器规则 ， 尽量不操作子元素

Flex布局的核心概念包括两个主要部分：Flex容器（Flex Container）和Flex项目（Flex Item）。

容器通过设置display: flex或display: inline-flex来启用，而其直接子元素会自动成为Flex项目。

如下图 ： 设置 container 容器 ， 其子元素自动成为他的项目

容器默认存在两条轴： 主轴（Main Axis） 和 交叉轴（Cross Axis） ，其中主轴方向为水平方向（默认为row），交叉轴为垂直方向（默认为column）

如下图：容器会有两个方向轴 ， 默认主轴为水平方向向 、交叉轴为垂直方向

其中定义左上角为起点

通过容器属性和项目属性 ， 我们可以实现很多更灵活、响应式的页面布局方式，适用于各种屏幕尺寸和设备。

容器属性

我们可以通过容器属性来实现 ， 容器属性有六个

  1. flex-direction：决定主轴的方向，例如row、row-reverse、column和column-reverse。
  2. justify-content：定义主轴上的对齐方式，例如flex-start、flex-end、center等。
  3. align-items：定义交叉轴上的对齐方式，例如flex-start、flex-end、center等。
  4. flex-wrap：控制子元素是否换行，取值包括nowrap（不换行）、wrap（换行）和wrap-reverse（反向换行）。
  5. align-content：当多行排列时，定义多行的对齐方式。
  6. flex-flow：是flex-direction和flex-wrap的简写形式，默认值为row nowrap。

flex-direction

  • 定义主轴的方向（即子元素排列的方向）。默认值为 row，表示主轴为水平方向。可以通过设置为 column 将主轴改为垂直方向。
  • 当主轴方向为 row 时，子元素从左到右排列；当主轴方向为 column 时，子元素从上到下排列。

justify-content

控制子元素在主轴上的对齐方式。其值包括：

  • flex-start：子元素靠主轴起点对齐。
  • flex-end：子元素靠主轴终点对齐。
  • center：子元素居中对齐。
  • space-between：子元素在主轴上均匀分布，第一个子元素靠主轴起点，最后一个子元素靠主轴终点。
  • space-around：子元素在主轴上均匀分布，每个子元素两侧的距离相等。
  • space-evenly：子元素在主轴上均匀分布，两端与容器边缘的距离相等。

两端对齐

项目两侧间隔相等

align-items

控制子元素在交叉轴上的对齐方式。其值包括：

  • flex-start：子元素靠交叉轴起点对齐。
  • flex-end：子元素靠交叉轴终点对齐。
  • center：子元素居中对齐。
  • baseline：子元素的基线对齐。
  • stretch：子元素拉伸以填充整个容器的高度。

定义子元素在交叉轴的前后居中的对其方式

项目首行文字对齐

如果没有指定交叉轴的容器 ， 他将会占满整个容器

这三个比较常用

  • flex-direction 定义主轴方向，影响子元素的排列方向。
  • justify-content 控制主轴上的对齐方式。
  • align-items 控制交叉轴上的对齐方式。

flex-wrap

  • wrap(换行)
  • nowrap(不换行)
  • wrap-reverse(行序反向)

超出轴线自动换行

默认不换行

align-content

  • flex-start
  • flex-end
  • center
  • stretch
  • space-between
  • space-around

项目属性

在Flex布局中， Flex项目（Flex Item） 的属性用于控制单个项目在容器中的行为。

order

作用：控制Flex项目在容器中的排列顺序，根据项目数值定义元素的排序

默认值：0

说明：

  • Flex项目默认按照它们在HTML中的顺序排列。
  • order属性允许你改变这种顺序。数值越小，项目越靠前；数值越大，项目越靠后。
  • order可以为负值。
  • 示例：

align-self

允许项目自身有单独的交叉轴对其方式 ， 可以设置自己的 align-item

其中默认值继承容器属性

flex

项目属性 flex 属性其实包括 ：

  • flex-grow
  • flex-shrink
  • flex-basis

常用值：flex: initial;: 0 1 auto

Flex项目不会放大，但会缩小。

Flex项目的初始大小由内容决定。

flex-grow

作用：定义Flex项目在容器中分配剩余空间的比例。

默认值：0

说明：

  • 如果所有项目的flex-grow为0，则不会分配剩余空间。
  • 如果某个项目的值为1，它会占据剩余空间的一部分；如果值为2，它会占据其他项目的两倍空间。

示例

flex-shrink

作用：定义Flex项目在空间不足时的缩小比例。

默认值：1

说明：

  • 如果所有项目的宽度总和超过容器宽度，项目会按比例缩小。
  • flex-shrink: 0;表示项目不会缩小。

示例

flex-basis

作用：定义Flex项目在分配多余空间之前的初始大小。

默认值：auto

说明：

  • flex-basis可以设置为固定值（如200px）、百分比（如50%）或关键字（如auto, content)。
  • auto: Flex项目的初始大小由其内容决定。

示例

以下是关于 flex:1、flex:auto 和 flex:none 的详细对比分析，涵盖其底层逻辑、行为差异及适用场景：

一、flex:1

1. 语法定义

flex:1 是 flex-grow:1; flex-shrink:1; flex-basis:0% 的简写形式。

2. 核心行为
  • 空间分配逻辑：
    元素的初始尺寸由 flex-basis:0% 决定，即默认不占用任何空间。剩余空间会根据 flex-grow 的权重比例分配。例如，若两个元素均设置 flex:1，则平分剩余空间。
  • 收缩能力：
    当容器空间不足时，元素会按 flex-shrink:1 的比例收缩，但最小尺寸被限制为 0%（可能导致内容截断）。
3. 典型场景
  • 等分布局：多个子元素需均分容器宽度（如导航栏按钮）。
  • 内容无关的弹性区域：元素尺寸完全由容器剩余空间决定，忽略内容本身大小（如侧边栏和主内容区）。

二、flex:auto

1. 语法定义

flex:auto 等价于 flex-grow:1; flex-shrink:1; flex-basis:auto。

2. 核心行为
  • 空间分配逻辑：
    元素的初始尺寸由 flex-basis:auto 决定（即元素本身内容或显式设置的宽度/高度）。剩余空间按 flex-grow 分配，但需叠加初始尺寸。例如，若元素 A 的 flex-basis 为 200px，元素 B 的 flex-basis 为 100px，剩余空间将按 200px:100px 的比例分配。
  • 收缩能力：
    元素可收缩至小于初始尺寸（但不会小于 min-content），适合动态适配内容。
3. 典型场景
  • 内容优先的弹性布局：需根据内容动态调整（如卡片布局中部分卡片需固定宽度，另一部分自适应）。
  • 混合尺寸分配：需兼顾内容尺寸和剩余空间分配（如表单输入框与按钮组合）。

三、flex:none

1. 语法定义

flex:none 对应 flex-grow:0; flex-shrink:0; flex-basis:auto，即元素完全不可伸缩。

2. 核心行为
  • 固定尺寸：
    元素尺寸严格由内容或显式设置的 width/height 决定，既不扩展也不收缩。
  • 溢出处理：
    若容器空间不足，元素可能溢出，需结合 overflow 属性控制显示。
3. 典型场景
  • 固定尺寸元素：如图标按钮、固定宽高的广告位。
  • 防止内容截断：需确保元素内容完整显示（如导航栏中的文字标签）。

四、对比总结

属性等效值空间分配逻辑收缩能力适用场景
flex:11 1 0%完全依赖剩余空间，忽略初始尺寸可收缩至 0%等分布局、弹性容器填充
flex:auto1 1 auto结合初始尺寸和剩余空间按比例分配可收缩至最小内容动态内容适配、混合尺寸布局
flex:none0 0 auto完全固定尺寸，不参与空间分配不可收缩固定尺寸元素、防止内容截断

五、关键差异示例

场景 1：容器有剩余空间
  • flex:1：两个元素均分剩余空间，忽略各自内容宽度。
  • flex:auto：元素按初始尺寸（如 200px vs 100px）分配剩余空间，导致最终宽度比例不同。
  • flex:none：元素保持初始尺寸，剩余空间由其他弹性项目填充。
场景 2：容器空间不足
  • flex:1：元素按比例收缩，可能截断内容。
  • flex:auto：元素收缩至最小内容宽度（如文字不换行）。
  • flex:none：元素不收缩，可能导致容器溢出。

六、选择建议

  1. 优先 flex:1：当需完全控制空间分配且不依赖内容尺寸时（如响应式栅格）。
  2. 优先 flex:auto：当需兼顾内容动态适配和弹性扩展时（如复杂表单布局）。
  3. 优先 flex:none：当需固定元素尺寸或防止内容破坏布局时（如固定导航栏、图标）。

通过理解这些差异，可更精准地利用 Flexbox 实现复杂布局需求。

总结

Flex布局的主要特点包括：

  1. 空间分配：能够自动调整子元素的大小以适应容器的宽度或高度，从而实现灵活的布局。
  2. 方向无关：布局与方向无关，主轴和交叉轴可以自由切换，方便实现复杂的布局需求6。
  3. 对齐方式：通过justify-content、align-items等属性，可以控制子元素在主轴和交叉轴上的对齐方式。
  4. 换行与环绕：flex-wrap属性允许子元素在容器内换行，flex-wrap: wrap可实现环绕布局6。

Flex布局适用于简单的线性布局，但对于更复杂的布局场景，如多层嵌套或不规则布局，可能需要结合其他布局模式（如Grid）来实现

参考

avatar
文章
阅读
粉丝