</>
前端Wiki
在线工具 · 布局演示器
前端Wiki
/
工具
/
Flexbox / Grid 演示器
Flexbox / Grid 可视化布局演示器
工具说明
切换 Flexbox 与 Grid 两种布局模式，左侧调节参数，中间实时渲染子盒子，右侧自动生成可复制的 CSS 代码。更多布局概念详见
flex 词条
、
grid 词条
与
gap 词条
。
Flexbox 布局
Grid 布局
参数面板
flex-direction
row
row（水平排列）
row-reverse（反向水平）
column（垂直排列）
column-reverse（反向垂直）
justify-content
flex-start
flex-start
center
flex-end
space-between
space-around
space-evenly
align-items
stretch
stretch
flex-start
center
flex-end
baseline
align-content
stretch
stretch
flex-start
center
flex-end
space-between
space-around
flex-wrap
nowrap
nowrap（不换行）
wrap（换行）
wrap-reverse（反向换行）
gap
8 px
子元素数量
4 个
选中子项（高亮项）的伸缩属性
选中第
1
个
flex-grow
0
flex-shrink
1
order
0
grid-template-columns
预设
等宽 3 列 repeat(3, 1fr)
中宽两翼 1fr 2fr 1fr
自适应 repeat(auto-fill, minmax(120px, 1fr))
两栏 200px 1fr
等宽 2 列 repeat(2, 1fr)
等宽 4 列 repeat(4, 1fr)
自定义输入 ↓
仅预设非法时才回退，可随意输入实验。
grid-template-rows
auto
auto
100px 100px
1fr 1fr
80px auto 60px
repeat(2, 120px)
列间距 column-gap
8 px
行间距 row-gap
8 px
justify-items
stretch
stretch
start
center
end
align-items
stretch
stretch
start
center
end
子元素数量
5 个
实时预览
容器
虚线框为父容器，彩色盒子为子元素；点击参数即时渲染。
生成的代码
当前为 Flexbox 模式，复制以下 CSS 到项目中即可复刻该布局。
复制代码
常见组合速查
一键预设
点击按钮直接套用参数，可在参数面板基础上继续微调。
水平垂直居中
Flex 单行居中
两端对齐导航栏
justify-content: space-between
两栏布局
侧栏 + 主内容
圣杯布局
三栏 + 主体居中
页脚吸底
column 方向分配空间
等宽网格
Grid repeat(3, 1fr)
响应式自适应网格
auto-fill + minmax
固定 + 弹性两栏
Grid 200px 1fr
回到
前端Wiki 首页
已复制到剪贴板