ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN
EIGHT
Start applying display: flex; property to parent element This will take the all the elements in horizontal direction
.parent {
display: flex;
}
ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN
EIGHT
You can also change the direction of elements. For doing so, you need to mention the "flex-direction" property The flex-direction property specifies the direction of the items within the flex container
.parent {
flex-direction: row | row-reverse | column | column-reverse
}
After applying row, row-reverse, column and column-reverse in flex-direction.
They all are pretty intuitive.
ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN
EIGHT
row (default value)
EIGHT
SEVEN
SIX
FIVE
FOUR
THREE
TWO
ONE
row-reverse
column
ONE
TWO
THREE
FOUR
column-reverse
EIGHT
SEVEN
SIX
FIVE
If we have a large number of element in flex container, it can destroy the widht of elements.
As you can see our elements have shrunk a bit. This is becasue we haven't applied the flex-wrap property.
ONE
TWO
THREE
FOUR
FIVE
SIX
flex-wrap
It defines whether the flex items are forced in a single line or can be flowed into multiple lines depending on screen size. It persist the width of elements.
.parent {
flex-wrap: wrap;
}
Code link:
https://stackblitz.com/edit/js-j45msq?file=index.html
Now, this is right time to understand what main and cross axes are:
We can align elements within Flexbox in accordance with these two axis.
Main axis: Defined by flex direction.
Cross axis: Runs perpendicular to main axis.
1
2
3
2
1
3
flex-direction: row
flex-direction: row-reverse
cross start
main start
cross end
main end
cross start
main start
main end
cross end
cross
cross
main
2
3
1
2
1
3
flex-direction: column-reverse
flex-direction: column
main end
main start
cross start
cross end
cross start
cross end
main start
main end
main
main
cross
cross
Align flexible items within flex container.
Justify-content: For horizontal alignment.
Align-content: For vertical alignment.
Justify-content property aligns the flex items horizontally within the flex container.
Justify-content in space-around items are evenly distributed in the line with half size spaces on either end.
Align-content property align the flex items vertically within the flex container.
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
1
2
3
4
flex-start
flex-end
center
space-between
space-around
space-evenly
1
2
3
4
flex-start
flex-start
1
2
3
4
flex-end
1
2
3
4
5
6
space-around
1
2
3
4
space-between
1
2
3
4
5
6
center
2
4
3
1
space-evenly
The justify-content property aligns the items within flex container.
justify-content: flex-start
ONE
TWO
THREE
FOUR
FIVE
EIGHT
SEVEN
SIX
justify-content: center
ONE
TWO
THREE
FOUR
FIVE
EIGHT
SEVEN
SIX
ONE
TWO
THREE
FOUR
FIVE
EIGHT
SEVEN
SIX
justify-content: flex-end
align-content for vertical alignment.
For example:
align-content: flex-start
ONE
TWO
THREE
FOUR
align-content for vertical alignment.
For example:
align-content: center
ONE
TWO
THREE
FOUR
align-content for vertical alignment.
For example:
align-content: flex-end
ONE
TWO
THREE
FOUR
You can also position a particular item inside flex container. For this we have, align-self property.
For example:
ONE
TWO
THREE
FOUR
align-self: center
align-content: flex-end
ONE
TWO
THREE
FOUR
You can pass following values in align-self.
Demo:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-self&preval=auto
Moving even further next we have is "order".
If you want to change the ordering of the items within flex container.
You can use order property that specifies the order of an item relative to the rest of the items inside the same flex container.
.one { order: 2; }
.two { order: 3; }
.three { order: 1; }
.four { order: 3; }
order: 2
FOUR
ONE
TWO
THREE
order: 1
order: 3
order: 4
flex-grow
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.
.one { flex-grow: 2; }
.two { flex-grow: 3; }
.three { flex-grow: 2; }
.four { flex-grow: 2; }
flex-grow: 1;
ONE
TWO
THREE
FOUR
flex-grow: 3;
flex-grow: 2;
flex-grow: 2;
Similarly, we have "flex-shrink" property.
The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.