Beta
Codophile is currently in active development. Features may change rapidly! 🚀
Codophile
K
Playground
Templates
Effects
Docs
About
Get Started
Back to CSS
Flexbox Layout
Master flexible layouts by controlling container and item properties.
Container
Items
Flow & Spacing
Direction
row
row-reverse
column
column-reverse
Wrap
nowrap
wrap
wrap-reverse
Gap
10px
Alignment (Main Axis)
Justify Content
flex-start
flex-end
center
space-between
space-around
space-evenly
Alignment (Cross Axis)
Align Items
stretch
flex-start
flex-end
center
baseline
Align Content
(Multi-line only)
stretch
flex-start
flex-end
center
space-between
space-around
Reset All
Flex Container Preview
4 Items
1
2
3
4
Container CSS
Copy CSS
.container
{
display:
flex
;
flex-direction:
row
;
flex-wrap:
nowrap
;
justify-content:
flex-start
;
align-items:
stretch
;
align-content:
stretch
;
gap:
10px
;
}
