Ideas - -Full Stack MERN Web Development
Flex Main & Cross Axis
- Main & Cross Axis
- the Axis' determines item positioning and alignment.
- The Main Axis is determined by [flex-direction].
- The Cross Axis is perpendicular to the main axis.
- flex-direction sets the main axis (row or column)
- The main axis determines layout direction.
- the default direction for flex is row and does not need to be specified
- so a designation of [display: flex;] would default to flex row
Default Setup
Setting the default workspace
1
2
3
4
5
6
- By adding the display: flex property to the "parent" container, this section
takes the default flex AXIS of row, and becomes the "Main Axis".- also note that the default alignment is left to right
- This makes the "Cross Axis" vertical, aligning from top to bottom.
- After adding the display: flex; property, I could add the line flex-direction:
row;
but nothing would change because the default AXIS for flex, is row.
Main Axis Row
1
2
3
4
5
6
- However, if I add the line flex-direction: row-reverse; after the display:
flex;
assignment
it then reverses the left to right alignment to right to left as shown here.
1
2
3
4
5
6
- This works the same for a Main Axis of Column
- in the css for the parent container, add display: flex;
- and then add the line flex-direction: column;
1
2
3
4
5
6
- which can also be reversed by changing the line flex-direction: column;
to flex-direction: column-reverse;
1
2
3
4
5
6