CSS Flexbox 属性速查
容器与项目的全部常用属性及取值
REFERENCE · 13 ROWS
| 属性 | 作用 | 常用值 |
|---|---|---|
| display | 开启弹性布局 | flex / inline-flex |
| flex-direction | 主轴方向 | row / column / row-reverse |
| flex-wrap | 是否换行 | nowrap / wrap / wrap-reverse |
| justify-content | 主轴对齐 | flex-start / center / space-between / space-around |
| align-items | 交叉轴对齐 | stretch / center / flex-start / flex-end |
| align-content | 多行对齐 | space-between / center |
| gap | 间距 | 8px / 1rem |
| flex | 项目伸缩 | flex: 1 1 auto |
| flex-grow | 放大比例 | 0 / 1 / 2 |
| flex-shrink | 收缩比例 | 1 / 0 |
| flex-basis | 基准尺寸 | auto / 200px / 30% |
| align-self | 单个项目对齐 | center / flex-end |
| order | 排列顺序 | 1 / -1 |
HOW TO USE
怎么用CSS Flexbox 属性速查
- 打开CSS Flexbox 属性速查,表格已按主题整理好。
- 在右上角输入关键词可即时筛选,不用上下翻找。
- 需要写文档时点「复制为 Markdown」,直接粘到笔记里。
CSS Flexbox 属性速查是什么
容器与项目的全部常用属性及取值。CSS Flexbox 属性速查按表格整理 13 条常用对照,打开即可查,无需翻文档。
它属于「参考速查」下的「速查表」分类。命令、语法、快捷键的常用速查。 同类工具还包含 HTTP 请求方法对照表、Git 常用命令速查、正则表达式语法速查 等,可以在分类页一次看全。
适用场景
- 处理与「flex」相关的任务时可以直接用。
- 处理与「弹性布局」相关的任务时可以直接用。
- 处理与「justify-content」相关的任务时可以直接用。
- 处理与「align-items」相关的任务时可以直接用。
表格说明
本表共 13 行 3 列,内容按常用程度排序。 表格支持关键词筛选,复制出的 Markdown 可直接用于文档、Wiki 或技术博客。
隐私说明
本工具在浏览器内运行,输入内容不会发送到服务器,也不会被记录。 关闭或刷新页面后,输入即被清空。