Flexbox 弹性布局实验场
Flexbox Playground
在实时示例上逐个切换 flex 属性，同时看到 CSS 和每个属性改变了什么。
每个 flexbox 属性都放在一个活的示例上，每个控件下面有一行说明它实际做什么。预览是浏览器自己的 flex 布局，CSS 就是那个状态的书面记录，所以你看到的就是你的页面会做的。
预览
点一个项目，就能在右边改它自己的属性。
容器
项目 1
代码
- · 主轴是横向的。
- · flex-grow 都是 0，所以多余的空间由 justify-content 来分。
保持默认值的属性不会写出来，只写你改过的。
怎么用
设置容器属性
方向、换行和三个对齐属性。每个下面都有一句话解释它改变什么——尤其是 `align-content`，只有一行时它什么都不做。
点一个项目来编辑它
grow、shrink、basis、align-self 和 order 作用于单个项目。增删项目，看容器如何重新分配。
读说明并复制 CSS
面板描述你当前的布局实际会做什么，输出省略每一个仍在默认值的属性——所以你复制的只是你改过的。
常见问题
为什么我的项目溢出而不是收缩？
要么是 `flex-shrink: 0`，要么是某个子元素有最小内容尺寸。flex 项目的 `min-width` 默认是 `auto`，意味着它不会收缩到比内容更窄——一串不断行的长字符串或一张宽图片是常见的元凶。`min-width: 0` 是修法。
`align-items` 和 `align-content` 有什么区别？
`align-items` 在交叉轴上放置每个项目。`align-content` 放置的是换行产生多行之后的*整块行*——所以在 `nowrap` 下，或者只有一行时，它什么都不做。这是“这个属性坏了”最常见的来源。
该用 `order` 来重排东西吗？
慎用。它改变视觉顺序而不改变 DOM 顺序，所以屏幕阅读器和 Tab 顺序仍然跟着标记走。键盘用户在一个视觉上重排过的布局里按 Tab，焦点会在屏幕上跳来跳去——所以规范把它称为最后的手段。
Flexbox 还是 Grid？
一维用 Flexbox——一排按钮、一个工具栏、一张卡片的内部。行和列必须互相对齐时用 Grid。如果你在嵌套 flex 容器来假装一个网格，你要的是 Grid。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
流式尺寸 clamp 计算
Fluid Size Calculator
算出一条 clamp() 表达式，让尺寸在两个视口宽度之间平滑变化。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS，不重排任何声明，原本的记号序列一个不动。
CSS 网格布局生成
CSS Grid Builder
用命名区域可视化地排出网格，并导出 grid-template 的 CSS。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。