Flexbox 交互演示
交互式 Flexbox 演练场：调整容器（flex-direction、flex-wrap、justify-content、align-items、align-content、gap）与项目属性（flex-grow/shrink/basis、align-self、order），实时预览并输出等价 CSS，附带完整属性速查表。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
实时预览
预览区就是真实的 flex 容器，改动会立刻反映出来
容器属性
作用在 flex 容器上的属性
项目属性
只作用于当前选中的项目，输出为 :nth-child(n) 覆盖规则
等价 CSS
第一个项目写成 .flex-item 基础规则，其余项目用 :nth-child(n) 覆盖
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
}
.flex-item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 80px;
align-self: auto;
order: 0;
}
.flex-item:nth-child(2) {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 80px;
align-self: auto;
order: 0;
}
.flex-item:nth-child(3) {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 80px;
align-self: auto;
order: 0;
}
.flex-item:nth-child(4) {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 80px;
align-self: auto;
order: 0;
}属性速查表
列出常用取值的效果，取值尽量保持默认值以便看清差异
displaydisplay：声明弹性容器，取值 flex / inline-flex
flex块级弹性容器，独占一行inline-flex行内弹性容器，可以和文字同行排列
flex-directionflex-direction：主轴方向，决定项目的排列顺序
row水平方向，从左到右（默认）row-reverse水平方向，从右到左column垂直方向，从上到下column-reverse垂直方向，从下到上
flex-wrapflex-wrap：一行放不下时是否换行
nowrap不换行，项目被压缩（默认）wrap换行，第一行在上方wrap-reverse换行，第一行在下方
justify-contentjustify-content：项目在主轴上的对齐方式
flex-start靠主轴起点对齐（默认）flex-end靠主轴终点对齐center在主轴居中space-between两端贴边，剩余空间平均分给项目之间space-around每个项目两侧空间相等，两端留半个间距space-evenly所有间距（含两端）完全相等
align-itemsalign-items：单行项目在交叉轴上的对齐方式
stretch未设置尺寸时拉伸填满交叉轴（默认）flex-start靠交叉轴起点对齐flex-end靠交叉轴终点对齐center在交叉轴居中baseline按第一行文字基线对齐
align-contentalign-content：多行整体在交叉轴上的分布，需要配合 flex-wrap: wrap
stretch每行拉伸填满交叉轴（默认）flex-start所有行整体靠交叉轴起点flex-end所有行整体靠交叉轴终点center所有行整体居中space-between首行贴起点、末行贴终点，行间平均分配space-around每行两侧空间相等，两端留半个间距space-evenly所有行间距（含两端）完全相等
gapgap：项目之间的间距，不必再写 margin
10px容器内项目之间的间距，换行时的行间距同样生效
flex-growflex-grow：有剩余空间时按比例放大
2数值越大分到的剩余空间越多，0 表示不放大（默认）
flex-shrinkflex-shrink：空间不足时按比例收缩
00 表示不收缩（可能溢出），1 表示按比例收缩（默认）
flex-basisflex-basis：项目在主轴方向上的初始尺寸
120px设置后优先于 width / height，auto 表示按内容尺寸
align-selfalign-self：单个项目覆盖容器的 align-items
auto跟随容器的 align-items（默认）flex-start该项目靠交叉轴起点flex-end该项目靠交叉轴终点center该项目在交叉轴居中baseline该项目按文字基线对齐stretch该项目拉伸填满交叉轴
orderorder：改变排列顺序，不改动 DOM
-1数值越小越靠前，默认 0，可以是负数
这个工具能做什么
- 调布局时说不清 space-between 和 space-around 的区别：直接改一下看实时预览，比查文档快得多。
- 把容器与项目的设置导出成等价 CSS：容器一条规则、第一个项目是 .flex-item 基础规则、其余项目是 :nth-child(n) 覆盖。
- 排查「align-items 不生效」：常见原因是写了 flex-wrap: wrap 后应该用 align-content，或者项目上还有 align-self 覆盖。
- 当作 Flexbox 速查表用：每个常用取值旁边都有一句说明，忘了 flex-basis 和 width 谁优先时可以马上确认。
示例
输入
容器：justify-content 改成 space-between、align-items 改成 center、gap 16px；2 个项目，第 2 个 flex-grow 改成 1
输出
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
gap: 16px;
}
.flex-item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 80px;
align-self: auto;
order: 0;
}
.flex-item:nth-child(2) {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 80px;
align-self: auto;
order: 0;
}导出的 CSS 把属性写全（包括取默认值的那些），方便整块复制；预览区是真实的 flex 容器，改动立刻可见。
常见问题
align-items 和 align-content 有什么区别？
align-items 管「一行之内的项目」在交叉轴上怎么对齐；align-content 管「多行整体」在交叉轴上怎么分布，而且只有 flex-wrap: wrap 时才有意义。单行布局里改 align-content 看不到任何变化，就是这个原因。
flex-basis 和 width 谁优先？
在弹性容器里 flex-basis 优先于 width：主轴方向上的初始尺寸由 flex-basis 决定，width 只在 flex-basis 为 auto 时生效。所以设了 flex-basis: 80px 再改 width 不会有任何效果。
justify-content: space-between 两端为什么会贴边？
space-between 把剩余空间全部分配到项目之间，所以首项贴主轴起点、末项贴终点，两端不留空。想要两端也留出间距，用 space-around（两端各留半个间距）或 space-evenly（所有间距完全相等）。
为什么项目会溢出容器，不是应该自动收缩吗？
项目只有在 flex-shrink 大于 0 时才会收缩，而且收缩量还受 flex-basis 和内容最小尺寸（min-width: auto）限制。把某个项目的 flex-shrink 设为 0，它就不会再让出空间，自然可能溢出。
这个演示会记录我的操作吗？
不会。所有参数校验与 CSS 生成都在浏览器里完成，页面不发送任何请求，你的设置也不会被保存到服务器。
关键词：flexboxflexcssjustify-contentalign-itemsflex-grow弹性布局伸缩布局布局调试前端布局