container
.container {
display:
flex;
/* or inline-flex */
}
Sections:
> flex-direction > flex-wrap > justify-content > align-items > align-content > order > flex-basis > flex-grow > flex-shrink > align-self
/* Defines the main axis of the flex container (row or column) and the direction of its items (normal or reversed). */
.container {
flex-direction:
;
}
/* Indicates if the items should squeeze in a single line along the main axis or wrap onto multiple lines. */
.container {
flex-wrap:
;
}
/* Determines how to distribute extra free space when items do not occupy the entire space along the main axis. */
.container {
justify-content:
;
}
/* Aligns items along the cross axis (perpendicular to the main axis). */
.container {
align-items:
}
/* Determines how to distribute the lines when there is extra free space along the cross axis.
NOTE: This only takes effect when there is more than one line. */
.container {
align-content:
;
align-items:
;
}
/* While the overall order is determined by flex-direction, the position of each item can be changed using the order property.
NOTE: items with small values are placed before items with big values. */
.item-a
{
order:
;
}
.item-b
{
order:
;
}
.item-c
{
order:
;
}
.item-d
{
order:
;
}
/* Specifies the initial length of the item's dimension that runs along the main axis. This can be used as a base for other properties such as flex-grow or flex-shrink, which you will learn about next. */
.container {
flex-direction:
;
}
.item {
flex-basis:
;
width:
50px;
height:
50px;
}
/* Defines the proportion of available space that an item should take up to grow along the main axis. */
.item {
flex-basis:
50px;
}
.item1 {
flex-grow:
;
}
.item2 {
flex-grow:
;
}
.item3 {
flex-grow:
;
}
/* Defines the proportion of space that an item should give up to shrink along the main axis. */
.item {
flex-basis:
50%;
}
.item1 {
flex-shrink:
;
}
.item2 {
flex-shrink:
;
}
.item3 {
flex-shrink:
;
}
/* Aligns individual items along the cross axis. */
.container {
align-items: center;
}
.item2 {
align-self:
;
}