Flexbox Generator

可视化配置 Flexbox 布局，生成对应的 CSS 代码。

布局属性

Flex Direction

Justify Content

Align Items

Flex Wrap

Gap (px)

16px

Item Count

5 items

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
}

Flex Direction - 定义主轴方向，决定子元素的排列方向。

Justify Content - 定义子元素在主轴上的对齐方式。

Align Items - 定义子元素在交叉轴上的对齐方式。

Flex Wrap - 定义子元素是否换行。

Align Content - 定义多行子元素在交叉轴上的对齐方式（仅在换行时有效）。

Gap - 定义子元素之间的间距。