CSS Flexbox 游乐场

通过交互式游乐场学习 CSS Flexbox。可视化调整属性，即时查看结果，并复制生成的 CSS 代码。面向开发者的免费在线工具。

预设:

容器属性

16px

项目

预览

1 Item 1
2 Item 2
3 Item 3
4 Item 4
5 Item 5

生成的 CSS

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