首页
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 速查表
前端工具 · 相关工具
二维码生成器
在线二维码生成，自定义颜色尺寸，下载PNG/SVG
Crontab 生成器
Cron表达式可视化生成与中文描述，执行时间预览
像素/REM/EM转换器
PX/REM/EM单位互转，自定义基准字号，批量转换
条形码生成器
支持CODE128/EAN13/UPC等格式，自定义尺寸颜色，下载PNG
Favicon生成器
上传图片或输入文字生成favicon，支持ICO/PNG/SVG多尺寸导出
Box Shadow 生成器
CSS Box Shadow可视化生成，实时预览，代码一键复制
