Flex Container and Items

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

Imagine a Flex Container as a clever box and the Flex Items like the toys within it. The ‘olden days’ of web design involved sticking bricks together to kind of slide them around, whereas nowadays the box, which is the Flex Container, will stretch and shrink and gap itself out automatically.

1. The Flex Container (The Parent)

To get a Flex box started, you need to instruct an html element to act as a container, by setting display: flex; on it. You can then control the alignment of everything inside that container.

Key Properties for the Container:

flex-direction: Do you want your items in a row (horizontal) or a column (vertical)?
justify-content: This moves items along the main axis (usually left to right). You can pack them at the start, the end, the center, or space them out evenly.
align-items: This moves items along the cross axis (up and down). It’s how you perfectly center something vertically.
flex-wrap: By default, flex items try to stay on one line. If you set this to wrap, they will hop down to the next line if they run out of room.
gap: A lightweight method of inserting space between elements without using unattractive margins.

2. The Flex Items (The Children)

Those are the elements actually contained within the container. They “scale” which makes so that to respond to the size of the parent box.

Key Properties for the Items:

flex-grow: This is used to direct an item which is permitted to grow to fill any blank space. When used in conjunction with other items which have flex-grow: 1, the item with flex-grow: 2 will grow twice as much.
flex-shrink: This lets an item know whether or not it‘s permitted to shrink once the browser gets resized as to not ‘overflow’ from the box.
flex-basis: Think of this as the “starting width” of the item before it starts growing or shrinking.
align-self: This allows a single item to break the rules. Even if the parent says “everyone stay at the top,” one item can use align-self: center to move itself.

Summary Table

Feature	Role	Common Use
Container	The Boss	Sets the direction and overall spacing.
Items	The Workers	Decide how much space they take or how they individually align.
Main Axis	The Path	Usually horizontal; controlled by `justify-content`.
Cross Axis	The Side	Usually vertical; controlled by `align-items`.

A Simple Example

If you want to center a button perfectly inside a section, you would do this:

CSS

.parent-box {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  height: 200px;           /* Give it some height to see the effect */
}