🍋 CSS Tools
CSS Flexbox 生成器
生成 CSS Flexbox 布局代码
chars
words
sentences
lines
Flexbox Options
结果
结果
关于 CSS Flexbox 生成器
生成 CSS Flexbox 布局代码。可视化调整对齐、排列和换行。
工作原理
提供可视化界面来设置 Flexbox 容器属性（direction、wrap、justify-content、align-items）和子元素属性（flex-grow、order），实时预览布局效果。
分步教程
- 1 [
- 2 '
- 3 设
- 4 置
- 5
- 6 F
- 7 l
- 8 e
- 9 x
- 10
- 11 方
- 12 向
- 13 和
- 14 换
- 15 行
- 16 '
- 17 ,
- 18
- 19 '
- 20 调
- 21 整
- 22 对
- 23 齐
- 24 方
- 25 式
- 26 '
- 27 ,
- 28
- 29 '
- 30 设
- 31 置
- 32 子
- 33 元
- 34 素
- 35 属
- 36 性
- 37 '
- 38 ,
- 39
- 40 '
- 41 复
- 42 制
- 43 生
- 44 成
- 45 的
- 46
- 47 C
- 48 S
- 49 S
- 50
- 51 代
- 52 码
- 53 '
- 54 ]
提示
- [
- '
- j
- u
- s
- t
- i
- f
- y
- -
- c
- o
- n
- t
- e
- n
- t
- 控
- 制
- 主
- 轴
- 对
- 齐
- ，
- a
- l
- i
- g
- n
- -
- i
- t
- e
- m
- s
- 控
- 制
- 交
- 叉
- 轴
- 对
- 齐
- 。
- '
- ,
- '
- f
- l
- e
- x
- -
- w
- r
- a
- p
- :
- w
- r
- a
- p
- 允
- 许
- 元
- 素
- 换
- 行
- 。
- '
- ,
- '
- g
- a
- p
- 属
- 性
- 可
- 以
- 设
- 置
- 元
- 素
- 间
- 距
- 。
- '
- ]