CSS Flex layout
ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN
EIGHT
CSS Flex layout (Cont...)
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
CSS Flex layout (Cont...)
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.
CSS Flex layout (Cont...)
They all are pretty intuitive.
ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN
EIGHT
row (default value)
CSS Flex layout (Cont...)
EIGHT
SEVEN
SIX
FIVE
FOUR
THREE
TWO
ONE
row-reverse
CSS Flex layout (Cont...)
column
ONE
TWO
THREE
FOUR
CSS Flex layout (Cont...)
column-reverse
EIGHT
SEVEN
SIX
FIVE
CSS Flex layout (Cont...)
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
CSS Flex layout (Cont...)
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
CSS Flex layout (Cont...)
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.
CSS Flex layout (Cont...)
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
CSS Flex layout (Cont...)
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
CSS Flex layout (Cont...)
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.
CSS Flex layout (Cont...)
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
CSS Flex layout (Cont...)
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
CSS Flex layout (Cont...)
The justify-content property aligns the items within flex container.
- flex-start
- flex-end
- center
- space-between (Items will equal space between them).
- space-around (equal space b/w elements with half left side and half right side).
- space-evenly
CSS Flex layout (Cont...)
justify-content: flex-start
ONE
TWO
THREE
FOUR
FIVE
EIGHT
SEVEN
SIX
CSS Flex layout (Cont...)
justify-content: center
ONE
TWO
THREE
FOUR
FIVE
EIGHT
SEVEN
SIX
CSS Flex layout (Cont...)
ONE
TWO
THREE
FOUR
FIVE
EIGHT
SEVEN
SIX
justify-content: flex-end
CSS Flex layout (Cont...)
align-content for vertical alignment.
For example:
align-content: flex-start
ONE
TWO
THREE
FOUR
CSS Flex layout (Cont...)
align-content for vertical alignment.
For example:
align-content: center
ONE
TWO
THREE
FOUR
CSS Flex layout (Cont...)
align-content for vertical alignment.
For example:
align-content: flex-end
ONE
TWO
THREE
FOUR
CSS Flex layout (Cont...)
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
CSS Flex layout (Cont...)
align-content: flex-end
ONE
TWO
THREE
FOUR
CSS Flex layout (Cont...)
You can pass following values in align-self.
- auto
- stretch
- center
- flex-start
- flex-end
- baseline
- intial
- inherit
Demo:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-self&preval=auto
CSS Flex layout (Cont...)
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; }CSS Flex layout (Cont...)
order: 2
FOUR
ONE
TWO
THREE
order: 1
order: 3
order: 4
CSS Flex layout (Cont...)
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; }CSS Flex layout (Cont...)
flex-grow: 1;
ONE
TWO
THREE
FOUR
flex-grow: 3;
flex-grow: 2;
flex-grow: 2;
CSS Flex layout (Cont...)
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.
CSS Flex layout
By Code 100mph
