运行工具
本工具提供 CSS Flexbox 布局模型的详细参考指南，帮助开发者快速查阅弹性盒子相关属性。内容涵盖弹性容器的核心设置，包括显示模式、主轴方向、换行行为、主轴与交叉轴的对齐方式以及间距控制。同时详细列出弹性子项的属性，如增长因子、收缩比例、初始基准尺寸、简写语法、独立对齐及排序规则。参考中明确标注了各项属性的默认值，例如主轴方向为行、无换行、起始端对齐等。此外，工具还提供了多种实用布局的 CSS 代码示例，包括内容居中、导航栏制作、卡片网格、侧边栏结构、粘性页脚及等高列设计。通过查阅这些标准化的属性说明与实例代码，您可以准确理解 Flexbox 的工作机制，并在项目中高效实现复杂的响应式界面布局，无需依赖外部渲染预览。
使用说明
- 确定您需要查询的是弹性容器属性还是弹性子项属性。
- 在参考列表中定位具体的 CSS 属性名称。
- 阅读该属性的可用值列表及其功能描述。
- 查看属性说明中提到的默认行为，如未设置时的表现。
- 参考提供的 CSS 代码片段，将其应用到您的样式表中。
- 结合多个属性示例，构建如居中或网格等复杂布局。
示例
- 使用 justify-content: center 和 align-items: center 实现块级元素在容器内的完全居中。
- 通过 display: flex 和 flex-wrap: wrap 创建自动换行的响应式卡片网格布局。
- 利用 margin-top: auto 或 flex 属性组合实现底部始终粘滞的页脚布局效果。
常见问题
Flexbox 的默认主轴方向是什么？
默认情况下，弹性容器的主轴方向为行（row），即子元素从左到右水平排列。
如何设置弹性子项之间的间距？
可以使用 gap 属性设置间距，支持长度单位，例如 16px 或 1rem，分别控制行间距和列间距。
flex 简写属性包含哪些部分？
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写，用于一次性定义子项的增长、收缩及初始尺寸。
此工具能否预览 CSS 代码的实际渲染效果？
不能。本工具仅提供属性参考和代码示例，不提供浏览器渲染预览或实时布局计算功能。