什么是 Flexbox 生成器?
Flexbox Generator 是 CSS 灵活盒子布局的视觉游乐场,您通过菜单和间隙滑块设置容器属性,观看实时预览实时重新排列项目,并复制预览使用的确切 CSS,它消除了记住哪个属性做什么的猜测,因此您可以在浏览器开发工具中构建行、列、中心布局或卡片包装网格,而无需试错。
CSS flexbox生成器在这里构建了一个典型的导航栏,从默认值开始,将justify-content设置为空格-between,并将项目对齐到中心,五个预览项目扩展到行的边缘,生成的CSS框列表显示:flex;flex-direction:行;flex-wrap:nowrap;justify-content:空格-between;对齐-项目:中心;间隙:16px;将flex-wrap更改为wrap,出现一条对齐-content线,因为只有一旦项目可以wrap才重要,将间隙拖动到0,间隙线就会退出规则。
Flexbox 是一维布局模型:项目沿着主轴布局,在交叉轴上对齐,容器通过六个属性驱动几乎所有内容,flex-direction 选择主轴以及它向前运行还是向后运行,justify-content 沿着主轴分配自由空间,align-items 将项目定位在交叉轴上,flex-wrap 决定项目是否溢出到新线上,一旦包裹开启,将这些线分开排列的内容空间与空白增加项目之间一致的间距,而没有边距。
该工具在一个地方公开所有这些属性并立即显示结果。由于预览是用输出框中出现的相同声明渲染的,因此您看到的正是将 CSS 粘贴到样式表中时所生成的规则默认针对。container 类,并且仅列出重要的属性,包括仅在启用包装时对齐内容,因为它对单行没有影响。
Everything 完全在你的浏览器中运行,没有注册,没有上传任何内容,一旦页面加载,工具就会保持离线工作,它同样有用,作为了解 flex 属性如何交互的学习辅助工具,以及快速生成可生产 CSS 预览项目数量,调整头部容器的大小,并读出生成你想要对齐的声明,无论那是一个分布在空格之间的导航栏,还是完美地以两个轴为中心的英雄部分。
如何使用 Flexbox 生成器?
选择方向和包装
选择弯曲方向以及项目是否应该缠绕在多行上。
设置对齐方式
调整主轴上的合理内容并对齐横轴上的项目,直到预览与您的布局匹配。
调音间距
设置项目之间的间隙,以及包装开启时将行间隔开的对齐内容。
复制CSS
生成的规则实时更新。一键复制并粘贴到您的样式表中。
主要特点
实时预览
当您更改属性时,示例项目的容器会立即回流,因此您可以在复制任何代码之前看到布局
每个集装箱财产
控制显示、灵活方向、灵活包装、合理内容、对齐项目、对齐内容和来自一个面板的间隙
你所看到的就是你所得到的
预览使用与输出相同的声明,因此复制的 CSS 恰好生成屏幕上的布局
清洁、输出最少
生成的规则仅列出有意义的属性并省略对齐内容,直到打开包装
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!