CSS Flex/Grid 布局生成器

可视化调整 · 实时预览 · 一键复制 CSS

Flex 布局设置
预览 & CSS 代码
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
Grid 布局设置
例如：1fr 2fr 100px 或 repeat(3, 1fr)
例如：auto 1fr 或 50px 50px
预览 & CSS 代码
1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
}
调整参数即可实时预览布局效果，点击“复制 CSS 代码”直接用于你的项目。