总结css flex写法，弹性样式属性入门文字教程，父盒7个，子盒5个
feilong.org 修订于2026-02-02 04:15:09 12 次浏览飞龙抽空总结一下css3的弹性样式 flex的基本写法，作为弹性样式入门的文字教程，父盒7个样式属性，子盒5个。
本文修订网址：https://feilong.org/css-flex-abc 作者：飞龙博客
一、弹性父盒，有7个样式属性
1.父盒的 弹性模型
display:flex/inline-flex
必设。flex占行。inline-flex不占行
弹性样式的必设属性，无默认值
2.主轴线的 横竖兼走向，一共 顺逆沉浮 4个值.
flex-direction:row/row-reverse
/column/column-reverse
row 主轴线从左到右，横 顺主轴线
row-reverse 主轴线从右到左，横 逆主轴线
column 主轴线从上到下，竖 沉主轴线
column-reverse 主轴线从下到上，竖 浮主轴线
主轴线走向，决定了子盒的流动方式，
我把走一行主轴线，作为一条内容。
默认值为 row，横 顺主轴线
3.子盒太多，怎样换行？ 3个值
flex-wrap:nowrap/wrap/wrap-reverse
nowrap 不换行，用一条内容
wrap 正换行，可多条内容
wrap-reverse 反换行，可多条内容
默认值为 nowrap
4、内容内，子盒怎样摆放 6个值
justify-content:flex-start/flex-end/center
/space-between/space-around/space-evenly
同条内容内，子盒的摆放方式
主要有: 首 尾 中 间 周 均 6种，不能展开占满交叉轴
默认值为 flex-start
5.内容内，子盒怎样起伏？5个值
align-items:stretch/flex-start/flex-end
/center/baseline
同条内容内，子盒的起伏方式
主要有: 展 首 尾 中 基 5种，允许展开占满交叉轴
副轴线，也叫交叉轴，它垂直交叉于主轴线，主管起伏
默认值为 stretch
6、多条内容时，内容怎样摆放？ 7个值
align-content:stretch/flex-start/flex-end/center
/space-between/space-around/space-evenly
如果有多条内容，内容的摆放方式
主要有: 展 首 尾 中 间 周 均 7种，允许展开占满交叉轴
默认值为 stretch
多条内容，又叫多根轴线
轴线默认占满交叉轴
一般少用
7.父盒给子盒设间隔？
gap:0px;
单位还可以用 px em pt
原比较少用。
现在推荐多用，替代原margin方案
可分别设置行列间隔：gap: 行间隔 列间隔;
比如：gap: 10px 20px;
8. 父盒7属性对照表
【1】display - 弹性模型 口诀：必设块行
值：flex → 占行（块级）
inline-flex → 不占行（行内）
注：必设，无默认值
【2】flex-direction - 主轴走向 口诀：横顺逆 竖沉浮
值：row → 横顺轴，左→右（默认）
row-reverse → 横逆轴，右→左
column → 竖沉轴，上→下
column-reverse → 竖浮轴，下→上
【3】flex-wrap - 换行方式 口诀：不换正反
值：nowrap → 不换行（默认）
wrap → 正换行
wrap-reverse → 反换行
【4】justify-content - 主轴摆放 口诀：首尾中间周均
值：flex-start → 首部对齐（默认）
flex-end → 尾部对齐
center → 居中对齐
space-between → 两端对齐，间隔均分
space-around → 周围均匀分布
space-evenly → 完全均匀分布
【5】align-items - 交叉轴起伏 口诀：展首尾中基
值：stretch → 拉伸占满（默认）
flex-start → 顶部对齐
flex-end → 底部对齐
center → 垂直居中
baseline → 文字基线对齐
【6】align-content - 多内容摆放 口诀：展首尾中间周均
值：stretch → 拉伸占满（默认）
flex-start → 顶部对齐
flex-end → 底部对齐
center → 居中对齐
space-between → 两端对齐
space-around → 周围均匀
space-evenly → 完全均匀
注：多行时才生效，一般少用
【7】gap - 子盒间隔 口诀：行列间
值：0px → 无间隔（默认）
10px → 行列等间隔
10px 20px → 行10px，列20px
注：推荐多用，替代margin
二、弹性子盒，有5个样式属性
子盒可不设属性，有默认值。
1.伸：扩张比
flex-grow:0/1/2/n
默认为0，不参与分配剩余空间
如果设1，表示分1份剩余空间
如果设2，表示分2份剩余空间
2.缩：收缩比
flex-shrink:0/1/2/n
默认为1，允许收缩，权重为1
如果设2，允许收缩，权重为2（更易被压缩）
如果设0，禁止收缩
3.伸缩基准
flex-basis:auto/0/100px/12em
缩放前的基准尺寸
默认auto，表示根据内容或width决定
如果设0，表示忽略内容，按grow分配剩余空间
flex-basis = 分配空间前的"打底尺寸"
auto = 看内容/width（各取所需）
0 = 从零开始（绝对均分）
具体值 = 固定起步（先占这些，再谈分配）
4.覆盖父盒规定的起伏值
父盒用align-items规定子盒的起伏方式
align-self:auto;
默认为auto，表示不覆盖，
不覆盖时，继承父盒align-items的起伏规定
5.子盒怎样排序？
order:0;
默认为0，表示初始排序
数值越小，此子盒越靠前，可用负数
注意，子盒排序能穿越多条内容
6.子盒5属性对照表
【1】flex-grow - 扩张比
值：0 → 不参与分配（默认）
1 → 分1份剩余空间
2 → 分2份剩余空间
n → 分n份剩余空间
注：剩余空间按grow值比例分配
【2】flex-shrink - 收缩比
值：0 → 禁止收缩
1 → 允许收缩，权重1（默认）
2 → 允许收缩，权重2（更易被压缩）
n → 允许收缩，权重n
注：空间不足时，值越大缩得越狠
【3】flex-basis - 伸缩基准
值：auto → 根据内容或width决定（默认）
0 → 忽略内容，从零开始
100px → 固定起步100px
50% → 起步父盒50%宽度
注：伸缩前的"起步价"
【4】align-self - 单独起伏
值：auto → 继承父盒align-items（默认）
flex-start → 顶部对齐
flex-end → 底部对齐
center → 垂直居中
baseline → 基线对齐
stretch → 拉伸占满
注：覆盖父盒规定，单独设置
【5】order - 子盒排序
值：0 → 默认顺序
-1 → 提前（负数）
1 → 延后
n → 数值越小越靠前
注：可穿越多条内容重新排序
三、简写用的样式属性
1、父盒有简写的样式属性：
flex-flow = flex-wrap + flex-direction
2、子盒也有简写的样式属性：
flex = flex-grow + flex-shrink + flex-basis
默认值：flex: 0 1 auto;（零扩、一缩、自动基准）
常见 flex 写法对照表
flex: 0 0 auto → 零扩零缩自动基准 → flex: none
flex: 0 1 auto → 零扩一缩自动基准 → （默认不写）
flex: 1 0 auto → 一扩零缩自动基准 → （可大不可小）
flex: 1 1 auto → 一扩一缩自动基准 → flex: auto
flex: 1 1 0 → 一扩一缩零基准 → flex: 1
口诀记忆
flex: 1 → 我要剩余空间（自适应）
flex: none → 我固定不动（固定宽）
flex: auto → 我先内容，再分剩余
不写flex → 我随内容，有空间也不抢
四、弹性样式的兼容说明
1.旧样式
弹性父盒若设旧样式，比如
float,clear，还有效，但少用。
vertical-align，不起作用
text-align，对子盒失效，但对行内元素还有用。
1.浏览器版本兼容
IE9及更早版本，不支持 flex 属性。
IE10，需 -ms-flex。
E11以后，支持flex，不需-ms- 前缀
Safari6.1以后，需 -webkit-flex
不过，2026年了，这些浏览器兼容都可以不用考量了！
更新网址：https://feilong.org/css-flex-abc
最初发布：20260130 02:01:46 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： html css 教程