Concept
flex-box in CSS is a tool used to efficiently structure web pages.
flex-box always has a main axis (by default, it is a horizontal axis), and we can rely on this main axis to operate other attributes in a reasonable way.
Flex is only used to control the nearest child tags
After declaring flex for the parent tag, the default display of the child tags will be from left to right and have the same height as the parent tag
To effectively apply flex-box, we need to know the following CSS attributes:
- justify-content: align along the main axis
- align-item: align perpendicular to the main axis
How to use - justify-content
flex-start
1
2
3
center
1
2
3
flex-end
1
2
3
space-evenly
1
2
3
space-around
1
2
3
space-between
1
2
3
How to use - align-items
flex-start
1
2
3
center
1
2
3
flex-end
1
2
3
On This Page
Concept
How to use - justify-content
How to use - align-items