CSS Flex Container
Like the previous example here we have the flex container by making its background to aqua blue. We have defined it by setting its display to flex.
Example 1:
Each of the ghost images above is what we call flex items.
The following are the properties we can use in a flex container:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
CSS Flex-Direction Property
The flex-direction property specifies the display-direction of flex-items in the flex-container.
This flex-direction property can have values such as row, column, row-reverse, and column-reverse. Below are the values used in a flex container:
Example 2:
The first one is row which is the default value for flex-direction property:
Next is column where the flex items are aligned vertically from top to bottom:
Third is row-reverse which reverses the flex items horizontally. It displays these items from right to left:
1
2
3
4
Last is the column-reverse value which displays flex items from bottom to top:
1
2
3
4
CSS Flex-Wrap Property
This property specifies if the flex items should wrap or not if there is not enough room for one flex line. This property has three values:
- nowrap
- wrap
- wrap-reverse
These values are showcased here in our next example:
Example 3:
The nowrap value is the default flex-wrap property value. Even if the flex container is resized, the flex items will not wrap and overflow. Try to resize your browser window:
On the other hand, the wrap value will force the flex items to wrap if necessary. As you can see, the cats below already wrapped and will wrap further if you resize your browser window:
The last one called wrap-reverse wraps the flex items but in reverse order. Try to resize your browser window to see the effect on the numbers:
1
2
3
4
5
6
7
8
9
10
CSS Flex-Flow Property
This is a straight-forward property which allows the web designers to specify both the flex-direction and flex-wrap of a flexbox in a single line.
CSS Justify-Content Property
This property simply horizontally aligns flex items when they do not use all the available space or width of its flex container. This property have the following values and further explained in Example 4.
- center
- flex-start
- flex-end
- space-around
- space-between
- space-evenly
Example 4:
The center value positions the flex items in the center of the container.
The flex-start value positions the flex items at the beginning of the container. This is also the default value.
The flex-end value does the opposite and positions the flex items at the end of the container. The order is not reversed.
Next is space-around value which puts space around the flex items.
Next is space-between value which differs from the one above by putting space between the flex items.
Last is space-evenly which puts an equal space around each flex item.
CSS Align-Items Property
The align-items property is used to vertically align the flex items if there is a remaining vertical space. This property have the following values:
- center
- flex-start
- flex-end
- stretch
- baseline
- normal
Example 5 shows us the differences for each of these values:
Example 5:
The first one is the center value which positions the flex items in the middle of the container.
The flex-start value positions the flex items at the top of the container.
The flex-end value does the opposite of the above and puts the flex items at the bottom of the container.
The stretch value stretches the items to fill the container. This is a default value.
The last one is baseline value which positions all of the flex items at the baseline center of the container no matter if each flex item has different sizes. For this example, we will use text with different font sizes and will later align them on the text baseline of the container.
Can you
smell
what The Rock
is cooking?
CSS Align-Content Property
This is used to align flex lines. This works similar to the align-item property but differs since align-content property aligns the flex lines and not the flex items. This property have similar values with the align-item property:
- center
- stretch
- flex-start
- flex-end
- space-around
- space-between
- space-evenly
For the following examples, we will be having div elements as flex container with a 600px height and flex-wrap set to wrap to demonstrate the align-content property values.
Example 6:
The first value is center which makes all the flex lines grouped towards the center of the container.
1
2
3
4
5
6
7
8
9
10
Next is stretch which makes the flex lines stretch to take up the remaining space of the container. This is also the default value.
1
2
3
4
5
6
7
8
9
10
The flex-start value makes the flex lines pack at the start of the container.
1
2
3
4
5
6
7
8
9
10
While the flex-end value makes the flex lines pack at the end of the container.
1
2
3
4
5
6
7
8
9
10
Next is space-between value which makes the space between flex lines equal but the first item is flush with the start edge of the container while the last item is flush with the end edge of the container.
1
2
3
4
5
6
7
8
9
10
Then the space-around value makes the space between flex lines equal too but there is space between the first item and the top edge and the last item and the bottom edge which equals to half of the space between flex lines.
1
2
3
4
5
6
7
8
9
10
Last is space-evenly value which distributes the flex lines in the flex container evenly with equal space on top, bottom and in-between.
1
2
3
4
5
6
7
8
9
10
CSS Perfect Centering
With all the knowledge above, we can now perfectly center an item inside a flex container using only justify-content and align-items properties both set at center:
Example 7:
