Bugl — code interview practice that feels like a game

Loading lesson path

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind CSS Flexbox Align?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Order

Put the learning moves in the order that makes the concept easiest to apply.

True Centering With Flexbox

CSS align-content Property

CSS align-items Property

The align-items property aligns the flex items vertically (on the cross-axis).

This property can have one of the following values:

normal (default)
stretch
center
flex-start
flex-end
baseline

center

flex-start

flex-end

stretch

CSS align-content Property

The align-content property aligns the flex lines. It only has effect when flex items wrap onto multiple lines.

This property can have one of the following values:

stretch (default)
center
flex-start
flex-end
space-between
space-around
space-evenly

center

space-between

True Centering With Flexbox

The following example shows how to solve a common style problem: true centering.

To achieve true centering, set both the justify-content and the align-items properties to center for the flex container, and the flex item will be perfectly centered both horizontally and vertically:

Example

Formatted code

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

Live preview