admin
在布局方式中大致分为一下几种方式
标准流：盒子模型+元素显示类型脱流：浮动 + 定位自适应布局（响应性布局）：弹性盒子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）
那么实际的渲染顺序则位 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 |
作用：定义项目在分配剩余空间前的初始尺寸
特殊值：
content：基于内容自动计算（类似width: max-content）
auto：优先使用width属性，无设置则取内容尺寸
这都是什么甲骨文！看不懂！上图！！！！！！
flex-grow
这是三个元素，现在我给他们3个每个人都是flex-grow: 1 ，所以现在是等分状态
现在 如果我给第一个设置flex-grow: 2;
可见元素比例现在为 2：1：1，
常见场景
这时，我的第二个div(son)盒子就是基于父元素(father)沿着主轴，宽度自适应的
效果为不论父元素宽度如何，我的left盒子始终不变，而我的son盒子则会补全右边区域
此时，如果有第三个盒子，也设置了flex-grow：1，那么第三个盒子和son盒子将会平分除了left盒子之外的区域
注意！！！！ flex属性，只针对剩余空间！！！！
使用：
flex: 1 1 300px; /* 最小300px，自动伸缩 */
flex: 0 0 120px; /* 固定按钮宽度，不允许收缩*/
简写形式等效值典型应用场景flex: initial0 1 auto默认行为，允许收缩不允许扩展flex: auto1 1 auto完全弹性项目flex: none0 0 auto固定尺寸项目flex: 11 1 0%等分容器空间flex: 200px1 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 布局对比
特性FlexboxGrid布局维度一维二维最佳场景组件内部布局、线性排列整体页面结构、复杂网格内容适配内容驱动容器驱动代码复杂度简单较高浏览器支持更广泛较新
学到的小伙伴，点个关注哦~