Menu
Home
Articles
About
Flex Container
display
block
flex
inline-flex
width
100%
50%
height
100%
40VH
flex-direction
row
row-reverse
column
column-reverse
flex-wrap
nowrap
wrap
wrap-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-content
stretch
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
stretch
flex-start
flex-end
center
baseline
row-gap
0
1
2
column-gap
0
1
2
Flex Items
order
0
1
2
flex-grow
0
1
flex-shrink
0
1
flex-basis
auto
20%
align-self
auto
stretch
flex-start
flex-end
center
baseline
Flex Container
display
:
block
flex
inline-flex
width
:
100%
50%
height
:
100%
40VH
flex-direction
:
row
row-reverse
column
column-reverse
flex-wrap
:
nowrap
wrap
wrap-reverse
justify-content
:
flex-start
flex-end
center
space-between
space-around
space-evenly
align-content
:
stretch
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
:
stretch
flex-start
flex-end
center
baseline
row-gap
:
0
1
2
column-gap
:
0
1
2
Flex Items
order
:
0
1
2
flex-grow
:
0
1
flex-shrink
:
0
1
flex-basis
:
auto
20%
align-self
:
auto
stretch
flex-start
flex-end
center
baseline
1. Lorem ipsum
2. Lorem ipsum dolor sit amet consectetur.
3. Lorem ipsum, dolor sit amet consectetur, ea.orem ipsum, dolor sitamet consectetur, ea.
4. Lorem, ipsum dolor sit.
5. Lorem, ipsum.
6. Lorem ipsum dolor sit amet elit.