Bird
Raised Fist0
CSSmarkup~5 mins

Flex direction in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Flex direction tells the browser how to arrange items inside a container. It helps decide if items go side by side or stacked up.

When you want items in a row, like buttons in a toolbar.
When you want items stacked in a column, like a list of menu links.
When you want to change the order of items visually without changing the HTML.
When you want a layout that adapts for mobile screens by switching direction.
When you want to create a navigation bar that can switch between horizontal and vertical.
Syntax
CSS
flex-direction: row | row-reverse | column | column-reverse;
row arranges items left to right (default).
column stacks items top to bottom.
Examples
Items line up side by side from left to right.
CSS
flex-direction: row;
Items stack vertically from top to bottom.
CSS
flex-direction: column;
Items line up side by side but in reverse order, right to left.
CSS
flex-direction: row-reverse;
Items stack vertically but from bottom to top.
CSS
flex-direction: column-reverse;
Sample Program

This example shows a container with three items stacked vertically because flex-direction: column; is used. The container has a border and spacing between items for clarity.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Flex Direction Example</title>
<style>
  .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 2px solid #333;
    padding: 1rem;
    width: 200px;
  }
  .item {
    background-color: #4a90e2;
    color: white;
    padding: 0.5rem;
    text-align: center;
    border-radius: 0.25rem;
    font-family: Arial, sans-serif;
  }
</style>
</head>
<body>
  <section class="container" aria-label="Flex direction container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Remember to set display: flex; on the container before using flex-direction.

Using flex-direction changes the main axis, which affects how other flex properties behave.

For accessibility, use semantic HTML and ARIA labels to describe the container's role.

Summary

flex-direction controls how flex items are laid out: in a row or column, normal or reversed.

It works only when display: flex; is set on the container.

Changing direction helps create flexible and responsive layouts easily.

Practice

(1/5)
1. What does the CSS property flex-direction control in a flex container?
easy
A. The direction in which flex items are laid out (row or column)
B. The color of flex items
C. The size of the flex container
D. The font style of flex items

Solution

  1. Step 1: Understand the role of flex-direction

    The flex-direction property sets the main axis direction for flex items inside a flex container.

  2. Step 2: Identify what flex-direction affects

    It controls whether items are laid out in a row (horizontally) or column (vertically), and if the order is normal or reversed.

  3. Final Answer:

    The direction in which flex items are laid out (row or column) -> Option A

  4. Quick Check:

    flex-direction controls layout direction [OK]
Hint: Remember: flex-direction sets row or column layout [OK]
Common Mistakes:
  • Confusing flex-direction with color or size properties
  • Thinking flex-direction changes container size
  • Assuming flex-direction affects font styles
2. Which of the following is the correct syntax to set flex items in a column direction?
easy
A. display: flex; flex-direction: row-column;
B. display: flex; direction: column;
C. display: block; flex-direction: column;
D. display: flex; flex-direction: column;

Solution

  1. Step 1: Check the container display property

    Flexbox requires display: flex; on the container to work.

  2. Step 2: Verify the flex-direction syntax

    The correct property is flex-direction with values like row or column. The value column is valid.

  3. Final Answer:

    display: flex; flex-direction: column; -> Option D

  4. Quick Check:

    Use display flex + flex-direction column [OK]
Hint: Always use display:flex before flex-direction [OK]
Common Mistakes:
  • Using invalid values like 'row-column'
  • Forgetting display:flex on container
  • Using 'direction' instead of 'flex-direction'
3. Given this CSS: 
div.container {
  display: flex;
  flex-direction: row-reverse;
}
What will be the order of flex items inside div.container?
medium
A. Items will be stacked vertically in normal order
B. Items will be laid out from left to right in normal order
C. Items will be laid out from right to left in reverse order
D. Items will be stacked vertically in reverse order

Solution

  1. Step 1: Identify flex-direction value

    The value row-reverse means items are placed in a row but in reverse order, starting from the right.

  2. Step 2: Understand layout direction

    Flex items will appear horizontally but reversed, so the last item appears first on the right side.

  3. Final Answer:

    Items will be laid out from right to left in reverse order -> Option C

  4. Quick Check:

    row-reverse means horizontal reversed layout [OK]
Hint: row-reverse flips horizontal order right to left [OK]
Common Mistakes:
  • Confusing row-reverse with column direction
  • Assuming normal left-to-right order
  • Thinking items stack vertically
4. This CSS code does not change the layout direction as expected. What is the error? 
.box {
  flex-direction: column;
}
medium
A. Missing display: flex; on the container
B. Incorrect property name, should be flex-direction-row
C. Value column is invalid
D. Flex-direction only works on inline elements

Solution

  1. Step 1: Check if flex container is set

    The property flex-direction only works if the container has display: flex;.

  2. Step 2: Identify missing display property

    The code does not include display: flex;, so the layout direction won't change.

  3. Final Answer:

    Missing display: flex; on the container -> Option A

  4. Quick Check:

    flex-direction needs display:flex [OK]
Hint: Always set display:flex before flex-direction [OK]
Common Mistakes:
  • Forgetting to set display:flex
  • Using wrong property names
  • Thinking flex-direction works on inline elements
5. You want a flex container to display items vertically but with the last item shown at the top. Which CSS flex-direction value should you use?
hard
A. column
B. column-reverse
C. row-reverse
D. row

Solution

  1. Step 1: Understand vertical layout

    To display items vertically, use column or column-reverse.

  2. Step 2: Reverse order with last item on top

    The column-reverse value stacks items vertically but reverses their order, so the last item appears at the top.

  3. Final Answer:

    column-reverse -> Option B

  4. Quick Check:

    column-reverse stacks vertically reversed [OK]
Hint: Use column-reverse for vertical reversed order [OK]
Common Mistakes:
  • Choosing row-reverse which is horizontal
  • Using column without reverse order
  • Confusing row and column directions