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 代码