a11y.skipToMainContent
1

CSS Flexbox 发电机

使用 CSS 弹性框可视化的实验——调整每个容器属性并复制生成的 CSS.

Items: 5

1 to 12 items.

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Flexbox Generator

  1. 选择一个灵活方向和灵活包装容器.
  2. 调整合理内容、对齐项目、对齐内容和空白.
  3. 使用添加项并删除项设置预览中显示的框数 .
  4. 复制生成的 CSS 容器并粘贴到您的工程中 .

{姓名}是什么来着?

这个工具是CSS灵活框布局的亲手操场. 将一个容器变成有 < code> display: flex 的弹性上下文,解锁了强大的一维对齐,这个生成器可以让您同时预览每个容器属性,而不是猜测.

更改主轴方向,控制包接,以"码"为正则-内容

Advertisement

FAQ

说明理由的内容与对齐的项目有何区别?
参数内容沿主轴分配项目(由弹性方向所设定的方向),而对齐项目则将其置于垂直相轴上。 在行和列之间切换弹性方向有效互换,以轴控每个行.
为什么对齐内容有时没有明显的效果?
仅当项目被包裹到多行时才适用对齐内容。 设定弹性包装, 在修改对齐内容以查看其效果之前, 将足够多的项目分到第二行 .

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement