CSS Flexbox/Grid 视觉布局演练场
CSS 布局演练场
Flexbox
Grid
子项控制
-
子项数量:
3
+
容器属性
主轴方向
row
row-reverse
column
column-reverse
换行方式
nowrap
wrap
wrap-reverse
主轴对齐
flex-start
flex-end
center
space-between
space-around
space-evenly
交叉轴对齐
stretch
flex-start
flex-end
center
baseline
多行对齐
stretch
flex-start
flex-end
center
space-between
space-around
列模板
行模板
网格间距
项目水平对齐
stretch
start
end
center
项目垂直对齐
stretch
start
end
center
子项属性
放大比例
缩小比例
基准大小
单独对齐
auto
flex-start
flex-end
center
baseline
stretch
列位置
行位置
实时预览
1
2
3
生成的 CSS 代码
问题反馈
反馈来源：
CSS布局演练场
工具链接：https://www.dkfile.com/Yangyang/layout-playground.html
反馈类型
问题反馈
功能建议/需求
技术支持
技术支持
商务合作
其他
反馈内容
0/1000
请尽可能详细地描述，这有助于我们更好地理解和解决问题
问题解决后，会通过你的帐号邮箱给你回复，也能在
我的反馈
查看问题处理进度。
上传图片（可选，最多9张）
选择图片
支持 jpg、png、gif、webp、bmp 格式，单张最大 5MB
举报
举报对象
CSS布局演练场
举报类型
违法违规
欺诈、虚假
抄袭 / 非原创
骚扰低俗
恶意、钓鱼风险
垃圾推广
其他
联系邮箱
补充说明（选填）
0/500
原创链接
（必填）
用于核对版权归属，请填写可公开访问的链接。
证据截图（选填，最多3张）
选择图片
支持常见图片格式，单张最大 5MB
请如实举报，恶意投诉可能限制帐号功能。
分享内容
CSS布局演练场
来自 DKFile 免费HTML网页托管平台
生成二维码中...
下载二维码
复制链接
一键分享到这些平台
X (Twitter)
微博
GitHub
Reddit
LinkedIn
WhatsApp
Telegram
微信
QQ
关闭
举报