Web Tools
Border
Shadow
Card
Font
Flexbox
Grid
Position
Gradient
Color
Transform
Filter
Text Effects
List
Animation
Button
Input
Table
Media Query
Clamp
Quote
Timeline
Flexbox Tool
Boxes
▼
Number of Boxes
5
Flex Container
▼
Direction
row
row-reverse
column
column-reverse
Wrap
nowrap
wrap
wrap-reverse
Justify Content
flex-start
flex-end
center
space-between
space-around
space-evenly
Align Items
stretch
flex-start
flex-end
center
baseline
Align Content (multi-line)
stretch
flex-start
flex-end
center
space-between
space-around
Row Gap
10px
Column Gap
10px
Flex Item Properties
▼
Select Item
Flex Grow
0
Flex Shrink
1
Flex Basis
auto
0
50px
100px
150px
200px
25%
33%
50%
Container Size
▼
Width
100%
auto
300px
500px
800px
Height
auto
100%
200px
300px
400px
500px
Colors
▼
Container
Items
Page Background
Reset All
Generated CSS
Copy CSS