FLEX CONTAINER
FLEX ITEMS
FLEX ITEMS
FLEX ITEMS
FLEX ITEMS
FLEX ITEMS
FLEX ITEMS
FLEX CONTAINER:
wrap | wrap items relative to the cross axis
justify-content | align items relative to the main axis
align-items | align items relative to the cross axis
align-content | align items relative to the cross axis when items wrap
FLEX ITEMS:
order | modify the item display order (order: 0 | default)
align-self | aligns the item independently relative to the cross axis
wrap | wrap items relative to the cross axis
justify-content | align items relative to the main axis
align-items | align items relative to the cross axis
align-content | align items relative to the cross axis when items wrap
FLEX ITEMS:
order | modify the item display order (order: 0 | default)
align-self | aligns the item independently relative to the cross axis
1 row
main axis: → cross axis:
↓
flex direction: row
flex wrap: nowrap
flex: 0 1 auto (default)
A EXAMPLE ITEM
B EXAAAAAAMPLE IIIIIITEM
flex: auto
A EXAMPLE ITEM
B EXAMPLE ITEM
2 row
main axis: → cross axis:
↓
flex direction: row
flex wrap: wrap
flex: 0 1 auto (default)
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
flex: auto
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
3 row
main axis: → cross axis:
↓
flex direction: row
flex wrap: nowrap
flex: 0 1 auto (default)
justify-content: end
A EXAMPLE
B EXAMPLE
C EXAMPLE
justify-content: center
A EXAMPLE
B EXAMPLE
C EXAMPLE
justify-content: space-between
A EXAMPLE ITEM
B
C EXAMPLE ITEM
justify-content: space-evenly
A ITEM
B ITEM
C ITEM
justify-content: space-around
A ITEM
B ITEM
C ITEM
4 row
main axis: → cross axis:
↓
flex direction: row
flex wrap: nowrap
flex: 0 1 auto (default)
align-items: stretch (default)
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
align-items: center
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
align-items: start
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
align-items: end
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
5 row
main axis: → cross axis:
↓
flex direction: row
flex wrap: wrap
flex: 0 1 auto (default)
align-content: stretch (default)
1. calculate the available area
2. divide by the number of lines
3. stretch the items
1. calculate the available area
2. divide by the number of lines
3. stretch the items
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
align-content: start
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
align-content: end
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
align-content: center
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
align-content: space-between
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
align-content: space-evenly
A ITEM
B ITEM
C ITEM
D ITEM
align-content: space-around
A ITEM
B ITEM
C ITEM
D ITEM
D ITEM
1 column
main axis: ↓ cross axis:
→
flex direction: column
flex wrap: nowrap
flex: 0 1 auto (default)
A EXAMPLE ITEM FIXED WIDTH
B EXAAAMPLE IIITEM FIXEEED WIDTHHH
flex: auto
A EXAMPLE ITEM WIDTH NOT DEFINED
B EXAMPLE ITEM WIDTH NOT DEFINED
2 column
main axis: ↓ cross axis:
→
flex direction: column
flex wrap: wrap
flex: 0 1 auto (default)
A FIXED WIDTH
B FIXED WIDTH
C FIXED WIDTH
E FIXED WIDTH
flex: auto
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
3 column
main axis: ↓ cross axis:
→
flex direction: column
flex wrap: nowrap
flex: 0 1 auto (default)
justify-content: end
A EXAMPLE ITEM
B EXAMPLE ITEM
justify-content: center
A EXAMPLE ITEM
B EXAMPLE ITEM
justify-content: space-between
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
justify-content: space-evenly
A ITEM
B ITEM
justify-content: space-around
A ITEM
B ITEM
4 column
main axis: ↓ cross axis:
→
flex direction: column
flex wrap: nowrap
flex: 0 1 auto (default)
align-items: stretch (default)
A EXAMPLE ITEM
B EXAMPLE ITEM
align-items: center
A EXAMPLE ITEM
B EXAMPLE ITEM
align-items: start
A EXAMPLE ITEM
B EXAMPLE ITEM
align-items: end
A EXAMPLE ITEM
B EXAMPLE ITEM
5 column
main axis: ↓ cross axis:
→
flex direction: column
flex wrap: wrap
flex: 0 1 auto (default)
align-content: stretch (default)
1. calculate the available area
2. divide by the number of lines
3. stretch the items
1. calculate the available area
2. divide by the number of lines
3. stretch the items
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
align-content: start
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
align-content: end
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
align-content: center
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
align-content: space-between
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
F EXAMPLE ITEM
align-content: space-evenly
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
G EXAMPLE ITEM
align-content: space-around
A EXAMPLE ITEM
B EXAMPLE ITEM
C EXAMPLE ITEM
D EXAMPLE ITEM
E EXAMPLE ITEM
F EXAMPLE ITEM
item
order
A ORDER: 5
B ORDER: 3
C ORDER: 1
D ORDER: 2
align-self
AUTO
START
END
CENTER
STRETCH