CSS Flexbox 生成器

构建 Flexbox 示例

1. 选择样本大小、书写方向、换行和对齐方式。
2. 选择每个项目以编辑其文本、灵活的大小、最小行为和视觉顺序。
3. 检查轴并预览，然后复制当前的 CSS 和 HTML 片段或下载完整的示例。

理解例子

在选定的写入模式下，主轴跟随行或列。反向设置改变其开始和结束； RTL 不仅仅是通用的水平翻转。

Flex 基础是起始主要尺寸，而不是保证的最终宽度。增长、加权收缩、换行和自动最小尺寸都会影响浏览器的结果。

源代码顺序控制会更改 HTML。 CSS 顺序和反向设置会改变视觉排列，而不改变逻辑阅读或键盘顺序。

示例使用固定的 border-box 尺寸、内边距、边框和滚动。内部可用空间更小，系统字体或滚动条可能改变布局。

有用的实验

给三个项目正增长值并比较如何共享额外的空间。更改它们的文本和自动最小值，而不是假设每个弹性项目都相等。

启用换行，缩小示例并更改 align-content。nowrap 容器不使用此属性；启用换行的容器即使实际只有一行也可能使用它。

比较LTR和RTL，然后尝试垂直书写。阅读物理开始和结束标签，而不是假设行始终表示从左到右。

知道生成了什么

这是一个有界的固定尺寸组件示例，不是页面构建器，也不能保证响应式设计。实际内容和周围样式需要单独检查。

自动最小尺寸可能阻止预期的收缩。“允许小于内容尺寸”会明确将两个最小尺寸设为零；工具不会暗中更改它们。

适合仅更改观看比例。使用100%和包含的滚动区域来检查细节；解析支持或加载的预览并不能证明每个浏览器的渲染。

复制 HTML 得到的片段也需要 CSS。完整 HTML 下载与预览使用相同的文档，其中包括少量文档重置样式和严格的资源策略。

本地创作

该工具不会上传或保存示例文本或生成的代码。复制和下载完整示例仅在您主动请求时进行；网站其他服务仍适用各自的隐私规则。