Flexbox Simulator
Mastering Alignment & Sizes
⚡ Variasikan Ukuran
Reset Ukuran
📦 Container (Parent)
Direction
row
row-reverse
column
column-reverse
Wrap
nowrap
wrap
wrap-reverse
Gap
10px
Justify Content (Main Axis)
flex-start
flex-end
center
space-between
space-around
space-evenly
Align Items (Cross)
stretch (Default)
flex-start
flex-end
center
baseline
Align Content
stretch
flex-start
flex-end
center
space-between
space-around
👶 Item (Child)
Reset Props
Pilih Kotak:
1
2
3
4
5
6
Order
0
Flex Grow
0
Align Self
auto (Ikut Parent)
flex-start
flex-end
center
baseline
stretch
💻 CSS Output
1
2
3
4
5
6
📝
Catatan