0Pricing
CSS Academy · Lesson

Display Flex and Flex Direction

Enable flexbox on a container and control the main axis direction with flex-direction.

Display Flex and Flex Direction is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Enabling Flexbox

Flexbox is activated by setting display: flex on a container element (the flex container). Its direct children automatically become flex items.

.nav {
  display: flex;
}
/* All direct children of .nav are now flex items */

Inline Flex

display: inline-flex creates a flex container that flows inline (like inline-block) instead of as a block. The internal flexbox behavior is identical.

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

The Main Axis and Cross Axis

Flexbox has two axes:

  • Main axis: the primary direction items are laid out
  • Cross axis: perpendicular to the main axis

All flex properties refer to these axes, not fixed directions.

flex-direction: row (Default)

The default direction is row: items are placed left to right along the horizontal main axis.

.nav {
  display: flex;
  flex-direction: row; /* default */
}

flex-direction: column

flex-direction: column stacks items vertically. The main axis becomes vertical and the cross axis becomes horizontal.

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

flex-direction: row-reverse

row-reverse reverses the horizontal direction: items are placed right to left. The main axis start is on the right.

.rtl-nav {
  display: flex;
  flex-direction: row-reverse;
}

flex-direction: column-reverse

column-reverse stacks items bottom to top. The last item appears at the top.

.chat-list {
  display: flex;
  flex-direction: column-reverse;
  /* newest messages at the bottom when overflow scrolls */
}

flex-direction Affects All Flex Properties

When you change flex-direction, justify-content changes direction too. If direction is column, justify-content aligns along the vertical axis, not horizontal.

Simple Horizontal Layout

The simplest flexbox use case — centering items in a nav:

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 64px;
}

Simple Vertical Layout

Centering a card content vertically and horizontally:

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

flex-flow Shorthand

flex-flow is shorthand for flex-direction and flex-wrap:

.grid {
  display: flex;
  flex-flow: row wrap; /* direction wrap */
}

Quick Check

When flex-direction: column is set, which axis does justify-content control?

Recap

Set display: flex on a container to create a flex context for its children. flex-direction sets the main axis direction: row (horizontal) or column (vertical). All flex alignment properties are relative to these axes, not fixed left/right/up/down directions.

Frequently asked questions

Is the “Display Flex and Flex Direction” lesson free?

Yes — the full text of “Display Flex and Flex Direction” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Display Flex and Flex Direction”?

Enable flexbox on a container and control the main axis direction with flex-direction. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Display Flex and Flex Direction” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Display Flex and Flex Direction
  2. Justify-Content and Align-Items
  3. Flex Wrap and Align-Content
  4. Flex Grow Shrink and Basis
← Back to CSS Academy