Bugl — Daily coding puzzles and drills

CSS justify-content Property

Formula

The justify - content property aligns the flex items along the main - axis (horizontally).

This property can have one of the following values:

Formula

center flex - start

(default)

Formula

flex - end space - around space - between space - evenly

Example

Formula

The center value aligns the flex items in the center of the container:.flex - container {

display: flex;
justify-content: center;
}

Result:

Example

Formula

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;
}

Result:

Example

Formula

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

display: flex;
justify-content: flex-end;
}

Result:

Example

Formula

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

display: flex;
justify-content: space-around;
}

Result:

Example

Formula

The space - between value displays the flex items with space between the lines:.flex - container {

display: flex;
justify-content: space-between;
}

Result:

Example

Formula

The space - evenly value displays the flex items with equal space around them:.flex - container {

display: flex;
justify-content: space-evenly;
}

CSS Flexbox justify-content

CSS justify-content Property

Example

Result:

Example

Result:

Example

Result:

Example

Result:

Example

Result:

Example

Result:

CSS Flexbox justify-content

CSS justify-content Property

Example

Result:

Example

Result:

Example

Result:

Example

Result:

Example

Result:

Example

Result: