首页
AI
书签
收藏
工具
摸鱼
站内
百度
公众号
知乎
翻译
Github
S.O.
暂无数据
获取
首页
›
在线工具
›
前端工具
›
Flexbox布局
Flexbox布局
Flexbox布局可视化工具
常见布局预设
-- 选择预设 --
display: flex（容器属性）
flexDirection
row
row-reverse
column
column-reverse
justifyContent
flex-start
flex-end
center
space-between
space-around
space-evenly
alignItems
stretch
flex-start
flex-end
center
baseline
flexWrap
nowrap
wrap
wrap-reverse
alignContent
stretch
flex-start
flex-end
center
space-between
space-around
需要设置 flex-wrap: wrap 后生效
gap
px
实时预览
显示轴
添加子项
主轴 →
交叉轴 ↓
1
2
3
CSS 代码
标准 CSS
Tailwind
SCSS
复制代码
复制内联
重置所有
.container
{
display
:
flex
;
}
Flexbox 速查表
