Bird
Raised Fist0
CSSmarkup~5 mins

Flex container 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

A flex container helps arrange items in a row or column easily. It makes layouts flexible and neat without complicated code.

You want to line up buttons horizontally with equal spacing.
You need a navigation menu that adjusts on small screens.
You want to center content both vertically and horizontally.
You want items to wrap to the next line when the screen is small.
You want to create a simple responsive card layout.
Syntax
CSS
selector {
  display: flex;
}

Use display: flex; on a container to make it a flex container.

All direct children of this container become flex items.

Examples
This makes the nav element a flex container, so its child links line up in a row by default.
CSS
nav {
  display: flex;
}
This makes the container stack its children vertically instead of horizontally.
CSS
.container {
  display: flex;
  flex-direction: column;
}
This centers the flex items horizontally and vertically inside the container.
CSS
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
Sample Program

This example creates a flex container with three items. They appear side by side with space between them. On small screens, they stack vertically. The container and items have colors and padding 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 Container Example</title>
  <style>
    .flex-container {
      display: flex;
      gap: 1rem;
      background-color: #f0f0f0;
      padding: 1rem;
      border: 2px solid #ccc;
    }
    .flex-item {
      background-color: #4caf50;
      color: white;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      font-weight: bold;
      flex: 1;
      text-align: center;
    }
    @media (max-width: 600px) {
      .flex-container {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <section class="flex-container" aria-label="Example flex container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Flex containers only affect their direct children, not nested elements inside those children.

Use browser DevTools to see the flex container and items highlighted and experiment with properties live.

Flexbox works well for one-dimensional layouts (row or column), not complex grids.

Summary

Flex container arranges child items in a row or column easily.

Set display: flex; on a container to start using flexbox.

Flexbox helps create responsive and neat layouts with little code.

Practice

(1/5)
1. What does setting display: flex; on a container do?
easy
A. It hides the container and its children.
B. It makes the container's text bold.
C. It changes the container's background color.
D. It makes the container a flex container, arranging children in a row or column.

Solution

  1. Step 1: Understand the role of display: flex;

    Setting display: flex; on a container activates flexbox layout for its children.

  2. Step 2: Effect on child elements

    Children inside a flex container are arranged in a row by default or column if specified.

  3. Final Answer:

    It makes the container a flex container, arranging children in a row or column. -> Option D

  4. Quick Check:

    Flex container = display: flex [OK]
Hint: Remember: display: flex creates a flexible box container [OK]
Common Mistakes:
  • Confusing flex container with hiding elements
  • Thinking it changes colors or text styles
  • Assuming it only affects text formatting
2. Which of the following is the correct CSS syntax to make a container a flex container?
easy
A. container { display: flex; }
B. container { display: block-flex; }
C. container { flex: display; }
D. container { flex-display: true; }

Solution

  1. Step 1: Identify correct CSS property and value

    The correct property to enable flexbox is display with the value flex.

  2. Step 2: Check syntax correctness

    container { display: flex; } uses correct CSS syntax: display: flex;. Others are invalid CSS.

  3. Final Answer:

    container { display: flex; } -> Option A

  4. Quick Check:

    Correct syntax = display: flex [OK]
Hint: Use 'display: flex;' exactly to start flexbox [OK]
Common Mistakes:
  • Swapping property and value order
  • Using non-existent properties like flex-display
  • Adding extra words like 'true' or 'block-flex'
3. Given this CSS and HTML, what will be the layout of the boxes inside the container?
 .container { display: flex; } 
 .box { width: 50px; height: 50px; background: red; margin: 5px; }

<div class='container'> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div>
medium
A. Boxes arranged horizontally in a row with space between them.
B. Boxes stacked vertically in a column.
C. Boxes overlapping each other in the same spot.
D. Boxes hidden because of missing display property.

Solution

  1. Step 1: Analyze the container's display property

    The container has display: flex;, which arranges children in a row by default.

  2. Step 2: Understand the boxes' layout

    Each box has fixed size and margin, so they appear side by side with space around them.

  3. Final Answer:

    Boxes arranged horizontally in a row with space between them. -> Option A

  4. Quick Check:

    Flex default direction = row [OK]
Hint: Flex default direction is row, so children line up horizontally [OK]
Common Mistakes:
  • Assuming flex defaults to column
  • Thinking boxes overlap without positioning
  • Ignoring margin spacing between boxes
4. What is wrong with this CSS if the flex container does not arrange items in a row?
.container {
  display: flex;
  flex-direction: column;
}
medium
A. Flex container needs 'flex-wrap: wrap;' to arrange items.
B. Missing semicolon after display: flex;
C. The value 'column' is wrong; it should be 'row'.
D. Flexbox requires 'display: flexbox;' not 'display: flex;'.

Solution

  1. Step 1: Check the flex-direction property value

    The value 'column' arranges children vertically instead of horizontally.

  2. Step 2: Correct the value to 'row'

    Changing 'column' to 'row' fixes the layout to arrange items horizontally.

  3. Final Answer:

    The value 'column' is wrong; it should be 'row'. -> Option C

  4. Quick Check:

    flex-direction: row for horizontal [OK]
Hint: Use 'flex-direction: row' for horizontal layout [OK]
Common Mistakes:
  • Using 'column' instead of 'row' for horizontal layout
  • Confusing flex and flexbox in display
  • Assuming flex-wrap controls direction
5. You want a flex container to stack its child items vertically and center them horizontally. Which CSS achieves this?
hard
A. .container { display: flex; flex-direction: row; justify-content: center; }
B. .container { display: flex; flex-direction: column; align-items: center; }
C. .container { display: flex; flex-wrap: wrap; align-content: center; }
D. .container { display: block; text-align: center; }

Solution

  1. Step 1: Set flex-direction to column for vertical stacking

    Using flex-direction: column; stacks children vertically.

  2. Step 2: Use align-items: center to center horizontally

    align-items: center; centers items along the cross axis (horizontal in column direction).

  3. Final Answer:

    .container { display: flex; flex-direction: column; align-items: center; } -> Option B

  4. Quick Check:

    Column + align-items center = vertical stack + horizontal center [OK]
Hint: Use flex-direction column + align-items center for vertical center [OK]
Common Mistakes:
  • Using row direction when vertical stack needed
  • Confusing justify-content with align-items for cross axis
  • Using display block instead of flex