CSS Flex Container

[Guest]

CSS Flex Container


Parent Element (Container)
Like we specified in the previous chapter, this is a flex container
(the blue area) with three flex items:

1
2
3

The flex container becomes flexible by setting the display property to
flex:

Example

.flex-container { 
display: flex;}


Try it Yourself »

The flex container properties are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content









The flex-direction Property
The flex-direction property defines in which direction the container
wants to stack the flex items.

1
2
3


Example
The column value stacks the flex items vertically (from top to bottom):

.flex-container { 
display: flex; 
flex-direction: column;}


Try it Yourself »



Example
The column-reverse value stacks the flex items vertically (but from bottom to top):

.flex-container { 
display: flex; 
flex-direction: column-reverse;}


Try it Yourself »



Example
The row value stacks the flex items horizontally (from left to right):

.flex-container { 
display: flex; 
flex-direction: row;}


Try it Yourself »



Example
The row-reverse value stacks the flex items horizontally (but from right to left):

.flex-container { 
display: flex; 
flex-direction: row-reverse;}


Try it Yourself »




The flex-wrap Property
The flex-wrap property specifies whether the
flex items should wrap or not.
The examples below have 12 flex items, to better demonstrate the
flex-wrap property.

1
2
3
4
5
6
7
8
9
10
11
12


Example
The wrap value specifies that the flex items will wrap if necessary:

.flex-container { 
display: flex; 
flex-wrap: wrap;}


Try it Yourself »



Example
The nowrap value specifies that the flex items will not wrap (this
is default):

.flex-container { 
display: flex; 
flex-wrap: nowrap;}


Try it Yourself »



Example
The wrap-reverse value specifies that the flexible items will wrap
if necessary, in reverse order:

.flex-container { 
display: flex; 
flex-wrap: wrap-reverse;}


Try it Yourself »




The flex-flow Property
The flex-flow property is a shorthand property for setting both the
flex-direction and
flex-wrap properties.

Example

.flex-container { 
display: flex; 
flex-flow: row wrap;}


Try it Yourself »




The justify-content Property
The justify-content property is used to
align the flex items:

1
2
3


Example
The center value aligns the flex items at the center of the container:

.flex-container { 
display: flex; 
justify-content: center;}


Try it Yourself »



Example
The flex-start value aligns the flex items at the beginning of the container
(this is default):

.flex-container { 
display: flex; 
justify-content: flex-start;}


Try it Yourself »



Example
The flex-end value aligns the flex items at the end of the container:

.flex-container { 
display: flex; 
justify-content: flex-end;}


Try it Yourself »



Example
The space-around value displays the flex items with space before, between,
and after the lines:

.flex-container { 
display: flex; 
justify-content: space-around;}


Try it Yourself »



Example
The space-between value displays the flex items with space between the
lines:

.flex-container { 
display: flex; 
justify-content: space-between;}


Try it Yourself »




The align-items Property
The align-items property is used to align
the flex items.

1
2
3

In these examples we use a 200 pixels high container, to better demonstrate the
align-items property.

Example
The center value aligns the flex items in the middle of the
container:

.flex-container { 
display: flex;  height: 200px; 
align-items: center;}


Try it Yourself »



Example
The flex-start value aligns the flex items at the top of the container:

.flex-container { 
display: flex;  height: 200px; 
align-items: flex-start;}


Try it Yourself »



Example
The flex-end value aligns the flex items at the bottom of the container:

.flex-container { 
display: flex;  height: 200px; 
align-items: flex-end;}


Try it Yourself »



Example
The stretch value stretches the flex items to fill the container
(this is default):

.flex-container { 
display: flex;  height: 200px; 
align-items: stretch;}


Try it Yourself »



Example
The baseline value aligns the flex items such as their baselines aligns:

.flex-container { 
display: flex;  height: 200px; 
align-items: baseline;}

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:





1
2
3
4



Try it Yourself »




The align-content Property
The align-content property is used to align the flex lines.

1
2
3
4
5
6
7
8
9
10
11
12

In these examples we use a 600 pixels high container, with the
flex-wrap property set to wrap, to better demonstrate the align-content property.

Example
The space-between value displays the flex lines with equal space between them:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: space-between;
}


Try it Yourself »



Example
The space-around value displays the flex lines with space before,
between, and after them:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: space-around;
}


Try it Yourself »



Example
The stretch value stretches the flex lines to take up the remaining
space (this is default):

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: stretch;
}


Try it Yourself »



Example
The center value displays the flex lines in the middle of the container:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: center;
}


Try it Yourself »



Example
The flex-start value displays the flex lines at the start of the container:

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: flex-start;
}


Try it Yourself »



Example
The flex-end value displays the flex lines at the end of the container: 

.flex-container { 
display: flex;  height: 600px; 
flex-wrap: wrap; 
align-content: flex-end;
}


Try it Yourself »



Perfect Centering
In the following example we will solve a very common style problem: perfect
centering.



SOLUTION: Set both the justify-content and align-items properties to
center, and the flex item will be perfectly centered:

Example

.flex-container {  display: flex;  height: 300px;  justify-content:
center;  align-items: center;}

Try it Yourself »



The CSS Flexbox Container Properties
The following table lists all the CSS Flexbox Container properties:


Property
Description


align-content
Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines


align-items
Vertically aligns the flex items when the items do not use all available space on the cross-axis


display
Specifies the type of box used for an HTML element


flex-direction
Specifies the direction of the flexible items inside a flex container


flex-flow
A shorthand property for flex-direction and flex-wrap


flex-wrap
Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line


justify-content
Horizontally aligns the flex items when the items do not use all available space on the main-axis














★
+1

Reference: https://www.w3schools.com/css/css3_flex ... tainer.asp