彻底搞懂一篇就够了！！弹性布局（flex布局）-CSDN博客

本文链接：https://blog.csdn.net/hnsfdxweb3/article/details/148216163

在布局方式中大致分为一下几种方式

标准流：盒子模型+元素显示类型
脱流：浮动 + 定位
自适应布局（响应性布局）：弹性盒子
Grid网格布局

本期咱们将对当前主流的布局（Flex和Grid）中的Flex布局进行深入理解。

flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，通过使用display: flex属性来创建一个弹性容器。

当一个盒子被赋予一个 display:flex ，这个盒子就会显示成一个弹性盒子，一旦一个盒子被显示为弹性盒子，它的内部会多出两条轴，分别是主轴（默认横向），交叉轴（副轴，默认纵向轴）。弹性盒子内的子元素（子代元素），会成为弹性元素，沿着主轴方向进行排列

由于所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行。（flex-direction 属性的初始值是 row）
元素从主轴的起始线开始。（即容器最左边）
元素不会在主维度方向拉伸，但是可以缩小。
元素被拉伸来填充交叉轴大小。
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。（溢出而不会换行）

弹性盒子（赋予flex属性的盒子）样式

`flex-direction`

主轴由 flex-direction 定义，可以取 4 个值：

row 主轴为横轴，子代元素默认由左向右排列（默认）
row-reverse 主轴为横轴，子代元素有右向左排列
column 主轴为纵轴，子代元素由上至下排列
column-reverse 主轴为纵轴，子代元素由下至上排列

如果是row或者row-reverse，那么你的主轴将是横向的

如果是column或者column-reverse，那么你的主轴将是纵向的

justify-content和align-items和align-content属性

justify-content 设置弹性元素在主轴上的排列方式，它有以下几个值

flex-start 从开始的地方 （默认）
flex-end 从结束的地方
center 居中
space-between 弹性元素左右两边对齐弹性盒子的左右边，中间的元素等间距
排列
space-around 左右各空一截空间，该空间乘以2为中间元素之间的间距
space-evenly 所有弹性元素等间距排列

写出来可能有些抽象，那么我们来结合图片看下吧。

flex-start

flex-end

center

space-between

space-around

space-evenly

而操作交叉轴（副轴）的align-items则有5个属性

flex-start 从开始的地方 （默认）
flex-end 从结束的地方
center 居中
baseline 文字基线对齐
stretch 拉伸

咱们主要说两个有区别的地方

baseline

这个属性是以第一个元素的文字所在位置对齐

有些同学会问，这不是从左到右吗，和flex-start没什么区别，但是当改变第一个元素的文字基线时，他就成了这个效果

stretch

如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）

这个属性的取值非常多，这里我给大家罗列下，具体更细节的属性，大家可以去官网详细查看

属性值	效果描述	可视化示例
`stretch`(默认)	行拉伸填满交叉轴空间	行高度平均分配
`flex-start`	所有行紧贴交叉轴起点	行从顶部开始堆叠
`flex-end`	所有行紧贴交叉轴终点	行从底部开始堆叠
`center`	所有行在交叉轴居中	行整体垂直居中
`space-between`	首尾行贴边，中间行等距分布	行间距相等，顶部和底部无间距
`space-around`	所有行两侧有相等间距	行上下间距相等
`space-evenly`	所有行间距完全相等	包括容器边缘的间距也相等

大致的取值类似justify-content属性

flex-wrap

nowrap：默认值，不换行
wrap：换行
wrap-reverse：换行，第一行在下方

弹性元素（赋予flex属性的盒子的子元素）样式

order

order属性定义项目的排列顺序。数值越小，排列越靠前，同值按源码顺序排列，默认为0

作用：控制 Flex 项目在主轴方向的排列顺序
特点：
- 不改变 DOM 结构，仅改变视觉呈现顺序
- 适用于需要动态调整元素顺序的场景
- 支持负值（如 order: -1）

<div style="display:flex">
  <div style="order:0">A (order:0)</div>
  <div style="order:1">B (order:1)</div>
  <div style="order:-1">C (order:-1)</div>
</div>

那么实际的渲染顺序则位 C → A → B

align-self

设置弹性元素自身在副轴上的排列位置，他的取值和align-items是一
样的。会覆盖已有的align-items的值

stretch

center

start

就类似这种效果

justify-self

和align-self类似，不过justify-self是控制主轴放向

flex

flex是一个非常常用的属性，用于自适应，他可以有三个值，该属性定义子项目分配剩余空间，用flex来表示占多少份数。

flex: [flex-grow] [flex-shrink] [flex-basis];
默认值：flex: 0 1 auto (不扩展/允许收缩/基准尺寸自动)

这三个值分别代

flex-grow 扩展系数

取值：数字（≥0）
作用：当容器有剩余空间时，按比例分配额外空间

flex-shrink 收缩系数

取值：数字（≥0）
作用：当容器空间不足时，按比例收缩项目

flex-basis 基准尺寸

取值：auto | content | <length>
作用：定义项目在分配剩余空间前的初始尺寸

特殊值：
- content：基于内容自动计算（类似width: max-content）
- auto：优先使用width属性，无设置则取内容尺寸

这都是什么甲骨文！看不懂！上图！！！！！！

flex-grow

这是三个元素，现在我给他们3个每个人都是flex-grow: 1 ，所以现在是等分状态

现在如果我给第一个设置flex-grow: 2;

可见元素比例现在为 2：1：1，

常见场景

<div style="display:flex" class="father">
    <div style="width:200px" class="left"></div>
    <div style="flex-grow: 1" class="son"></div>
</div>

这时，我的第二个div(son)盒子就是基于父元素(father)沿着主轴，宽度自适应的

效果为不论父元素宽度如何，我的left盒子始终不变，而我的son盒子则会补全右边区域

此时，如果有第三个盒子，也设置了flex-grow：1，那么第三个盒子和son盒子将会平分除了left盒子之外的区域

注意！！！！ flex属性，只针对剩余空间！！！！

使用：

flex: 1 1 300px;  /* 最小300px，自动伸缩 */

flex: 0 0 120px; /* 固定按钮宽度，不允许收缩*/

简写形式	等效值	典型应用场景
`flex: initial`	`0 1 auto`	默认行为，允许收缩不允许扩展
`flex: auto`	`1 1 auto`	完全弹性项目
`flex: none`	`0 0 auto`	固定尺寸项目
`flex: 1`	`1 1 0%`	等分容器空间
`flex: 200px`	`1 1 200px`	最小保证200px的弹性项目

总结

Flex 布局是当前主流的两个布局之一，它为开发者提供了一种更高效、更灵活、响应式地来处理页面布局。

核心优势 ✅

1. 灵活的对齐控制

提供 justify-content、align-items 等专业对齐属性
轻松实现水平/垂直居中、等间距分布等复杂对齐需求

2. 动态空间分配

自动计算剩余空间分配比例
支持内容优先的弹性伸缩策略

3. 响应式布局优势

天然适配不同屏幕尺寸
配合 flex-wrap 实现自动换行

4. 代码简洁性

替代传统 float + clearfix 的复杂方案
减少定位属性的滥用

5. 元素顺序控制

order属性不修改DOM调整视觉顺序

主要局限 ❌

1. 一维布局限制

无法同时精确控制行和列（需配合 Grid 布局）
多行布局时对齐控制较弱

2. 浏览器兼容性

浏览器	主要限制
IE10/11	部分属性需前缀，`flex:1` 解析异常
旧版 Safari	需要 `-webkit-` 前缀

3. 性能隐患

深层嵌套可能导致渲染性能下降
动态修改 flex 属性易触发重排

4. 内容溢出问题

/* 需要额外处理 */
.item {
  min-width: 0; /* 修复文本溢出 */
  overflow: hidden;
}

如果

5. 学习曲线

flex-grow/shrink/basis 计算逻辑需要理解
不同简写形式 (flex:1 vs flex:auto) 易混淆

与 Grid 布局对比

特性	Flexbox	Grid
布局维度	一维	二维
最佳场景	组件内部布局、线性排列	整体页面结构、复杂网格
内容适配	内容驱动	容器驱动
代码复杂度	简单	较高
浏览器支持	更广泛	较新

学到的小伙伴，点个关注哦~