Flexbox 实验场

交互式 CSS Flexbox 实验场，学习和生成 Flex 容器和子项属性

在您的浏览器中本地处理

免费

无广告

无需注册账户

Preview

Click an item to edit its individual flex properties. Add up to 12 items.

布局预设

生成的 CSS

.container {
  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

gap8px

Item Properties

Click on an item in the preview to edit its properties.

所有子项

Item 1

Item 2

Item 3