Flexbox 布局生成器
可视化配置 Flexbox 属性，生成 CSS 代码
flex-direction
justify-content
align-items
flex-wrap
gap
8px
实时预览
1
2
3
4
5
CSS 代码
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;属性说明
flex-direction
控制主轴方向，决定子元素的排列方式
justify-content
控制主轴方向上的对齐方式
align-items
控制交叉轴方向上的对齐方式
flex-wrap
控制子元素是否换行
gap
控制子元素之间的间距