CSSFlex Container
CSS Flex Container Properties
The flex container element can have the following properties:
display- Must be set toflexorinline-flexflex-direction- Sets the display-direction of flex itemsflex-wrap- Specifies whether the flex items should wrap or notflex-flow- Shorthand property forflex-directionandflex-wrapjustify-content- Aligns the flex items when they do not use all available space on the main-axis (horizontally)align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrap
CSS flex-direction Property
Theflex-direction property specifies the display-direction of flex items in the flex container.
This property can have one of the following values:
row(default)columnrow-reversecolumn-reverse
Example
Therow value is the default value, and it displays the flex items horizontally (from left to right):
display: flex;
flex-direction: row;
}
Result:
Example
Thecolumn value displays the flex items vertically (from top to bottom):
display: flex;
flex-direction: column;
}
Result:
Example
Therow-reverse value displays the flex items horizontally (but from right to left):
display: flex;
flex-direction: row-reverse;
}
Result:
Example
Thecolumn-reverse value displays the flex items vertically (but from bottom to top):
display: flex;
flex-direction: column-reverse;
}
Result:
CSS flex-wrap Property
Theflex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.
This property can have one of the following values:
nowrap(default)wrapwrap-reverse
Example
Thenowrap value specifies that the flex items will not wrap (this is default):
display: flex;
flex-wrap: nowrap;
}
Result:
Example
Thewrap value specifies that the flex items will wrap if necessary:
display: flex;
flex-wrap: wrap;
}
Result:
Example
Thewrap-reverse value specifies that the flex items will wrap if necessary, in reverse order:
display: flex;
flex-wrap: wrap-reverse;
}
Result:
CSS flex-flow Property
Theflex-flow property is a shorthand property for setting both theflex-direction andflex-wrap properties.
CSS justify-content Property
Thejustify-content property is used to align the flex items when they do not use all available space on the main-axis (horizontally).
This property can have one of the following values:
centerflex-start(default)flex-endspace-aroundspace-betweenspace-evenly
Example
Thecenter value aligns the flex items in the center of the container:
display: flex;
justify-content: center;
}
Result:
Example
Theflex-start value aligns the flex items at the beginning of the container (this is default):
display: flex;
justify-content: flex-start;
}
Result:
Example
Theflex-end value aligns the flex items at the end of the container:
display: flex;
justify-content: flex-end;
}
Result:
Example
Thespace-around value displays the flex items with space around them:
display: flex;
justify-content: space-around;
}
Result:
Example
Thespace-between value displays the flex items with space between them:
display: flex;
justify-content: space-between;
}
Result:
Example
Thespace-evenly value displays the flex items with equal space around them:
display: flex;
justify-content: space-evenly;
}
Result:
CSS align-items Property
Thealign-items property is used to align the flex items when they do not use all available space on the cross-axis (vertically).
This property can have one of the following values:
centerflex-startflex-endstretchbaselinenormal(default)
In the following examples we use a 200 pixels high container, to better demonstrate thealign-items property.
Example
Thecenter value aligns the flex items in the middle of the container:
display: flex;
height: 200px;
align-items: center;
}
Result:
Example
Theflex-start value aligns the flex items at the top of the container:
display: flex;
height: 200px;
align-items: flex-start;
}
Result:
Example
Theflex-end value aligns the flex items at the bottom of the container:
display: flex;
height: 200px;
align-items: flex-end;
}
Result:
Example
Thestretch value stretches the flex items to fill the container (this is equal to "normal" which is default):
display: flex;
height: 200px;
align-items: stretch;
}
Result:
Example
Thebaseline value aligns the flex items at the baseline of the container:
display: flex;
height: 200px;
align-items: baseline;
}
Note: The example uses different font-size to demonstrate that the flex items gets aligned by the text baseline:
1
2
3
CSS align-content Property
Thealign-content property is similar toalign-items, but instead of aligning the flex items, it aligns the flex lines.
This property can have one of the following values:
centerstretch(default)flex-startflex-endspace-aroundspace-betweenspace-evenly
In the following examples we use a 400 pixels high container, with theflex-wrap property set towrap, to better demonstrate thealign-content property.
Example
Withcenter, the flex lines are packed toward the center of the container:
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
}
Result:
Example
Withstretch, the flex lines stretch to take up the remaining space of the container (this is default):
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: stretch;
}
Result:
Example
Withflex-start, the flex lines are packed toward the start of the container:
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-start;
}
Result:
Example
Withflex-end, the flex lines are packed toward the end of the container:
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-end;
}
Result:
Example
Withspace-between, the space between the flex lines are equal, but the first item is flush with the start edge of the container, and the last item is flush with the end edge of the container:
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
}
Result:
Example
Withspace-around, the space between the flex lines are equal, but the space before the first item and after the last item is set to half of the space between the flex lines:
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-around;
}
Result:
Example
Withspace-evenly, the flex lines are evenly distributed in the flex container, with equal space on top, bottom and between:
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-evenly;
}
Result:
True Centering
The following example shows how to solve a common style problem: true centering.
To achive true centering, set both thejustify-content and thealign-items properties tocenter for the flex container, and the flex item will be perfectly centered both horizontally and vertically:
flex item
Example
display: flex;
height: 400px;
justify-content: center;
align-items: center;
}
The CSS Flex Container Properties
The following table lists all the CSS Flex 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 display behavior (the type of rendering box) for an element |
| flex-direction | Specifies the direction of the flex 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 |
