Box Model & Layout

CSS Flexbox

One-dimensional layouts: align, distribute, and order items easily.

1The Flex Container

Set display: flex on a parent to make all direct children flex items.

Example Code

css

.container {
  display: flex;
  gap: 12px;
}

2Main Axis & Cross Axis

justify-content aligns along the main axis. align-items aligns on the cross axis.

Example Code

css

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3Wrapping & Direction

flex-wrap controls overflow; flex-direction switches between row and column.

Example Code

css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

4Item Sizing

flex: 1 makes items grow to fill available space. flex-basis sets the starting size.

Example Code

css

.item { flex: 1; }
.featured { flex: 2; }

5Understand it in a real interface

Flexbox organizes items primarily along one axis. The main axis changes with flex-direction, so justify-content does not always mean horizontal alignment. Wrapping, basis, growth, and shrink settings work together when items compete for limited space.

6Try it yourself

Create a row of three buttons with different label lengths. Enable wrapping and use gap, then reduce the width. Switch to a column and observe how the alignment axes change. Check a long unbroken label and try min-width: 0 on a flexible child where appropriate.

Finished reading?

Mark this topic as complete to track progress.

CSS Math Functions

Next Topic

CSS Grid