Toolypet
Tools
Blog
更改语言
切换主题
CSS工具
/
Flexbox演练场
Flexbox演练场
使用交互式可视化控件构建CSS Flexbox响应式布局
预览
重置
添加项目
1
2
3
容器属性
主轴方向
row
row-reverse
column
column-reverse
换行
nowrap
wrap
wrap-reverse
主轴对齐
flex-start
flex-end
center
space-between
space-around
space-evenly
对齐项目
flex-start
flex-end
center
stretch
baseline
对齐内容
flex-start
flex-end
center
stretch
space-between
space-around
间距
10px
预设
基本行
全部居中
分散对齐
两端对齐
平均分布
列布局
反向行
反向列
换行项目
项目
Item 1
增长
收缩
自身对齐
auto
flex-start
flex-end
center
stretch
baseline
顺序
Item 2
增长
收缩
自身对齐
auto
flex-start
flex-end
center
stretch
baseline
顺序
Item 3
增长
收缩
自身对齐
auto
flex-start
flex-end
center
stretch
baseline
顺序
CSS代码
Loading...