Search⌘ K
Home
Courses
The Complete Beginner’s Guide to CSS

Flexbox: Centering and Flex Items

Explore how to achieve perfect centering using Flexbox with justify-content and align-items set to center. Learn to manage flex items using properties such as order, flex-grow, flex-shrink, flex-basis, align-self, and the shorthand flex property. This lesson helps you control layout order, sizing, and alignment of child elements in a flex container for responsive web design.

We'll cover the following...

How to achieve perfect centering

Achieving perfect centering is quite simple with Flexbox! We simply need to ensure that both the justify-content and align-items properties are set to the center value:

Child elements (flex items)

Let’s take a look at the set of properties we can apply to child elements. These are our flex items. Any direct child elements of a flex container automatically become flex items.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

The four orange boxes shown in the figure above are our flex items because they’re direct ...