CSS Flexbox Practice Questions with Solutions

Introduction

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that makes it easy to arrange, align, and distribute space between items inside a container. Flexbox is widely used for navigation bars, cards, forms, image galleries, and responsive web layouts. It helps developers create flexible designs with less code compared to older layout methods. In this chapter, you’ll practice CSS Flexbox practice questions through simple solved questions that are easy for beginners to understand.

Question 1: Create a Flex Container

Problem Statement

Write CSS to make a <div> a Flexbox container.

CSS Code

.container {    display: flex;}

Output

All child elements inside the container are arranged in a horizontal row by default.

Explanation

• display: flex; turns the container into a Flexbox container.
• Child elements become flex items.
• The default direction is horizontal (row).

Question 2: Change Flex Direction

Problem Statement

Write CSS to arrange flex items vertically.

CSS Code

.container {    display: flex;    flex-direction: column;}

Output

All flex items are displayed one below another.

Explanation

• flex-direction controls the main axis.
• column stacks items vertically.
• The default value is row.

Question 3: Center Items Horizontally

Problem Statement

Write CSS to center all flex items horizontally.

CSS Code

.container {    display: flex;    justify-content: center;}

Output

The flex items appear centered horizontally inside the container.

Explanation

• justify-content aligns items along the main axis.
• center places all items in the middle.
• Other values include flex-start, flex-end, and space-between.

Question 4: Center Items Vertically

Problem Statement

Write CSS to center flex items vertically inside a container.

CSS Code

.container {    display: flex;    align-items: center;    height: 200px;}

Output

The flex items appear centered vertically.

Explanation

• align-items aligns items along the cross axis.
• center places items in the vertical middle.
• A fixed container height helps demonstrate the effect.

Question 5: Add Space Between Items

Problem Statement

Write CSS to place equal space between flex items.

CSS Code

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

Output

The first item is placed at the left, the last item at the right, and the remaining space is distributed evenly between the items.

Explanation

• space-between distributes the available space.
• The first and last items touch the container edges.
• This is commonly used for navigation menus.

Question 6: Add Space Around Items

Problem Statement

Write CSS to place equal space around all flex items.

CSS Code

.container {    display: flex;    justify-content: space-around;}

Output

Each flex item displays with equal space on both sides.

Explanation

• space-around adds space before and after every item.
• Edge spacing is smaller than the space between items.
• This property is useful for evenly spaced layouts.

Question 7: Allow Flex Items to Wrap

Problem Statement

Write CSS so that flex items move to the next line when there isn’t enough space.

CSS Code

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

Output

Flex items automatically move to the next row when needed.

Explanation

• flex-wrap: wrap; prevents items from shrinking too much.
• Items continue on a new line if the container becomes full.
• This helps create responsive layouts.

Question 8: Change the Order of a Flex Item

Problem Statement

Write CSS to display one flex item before the others.

CSS Code

.item {    order: -1;}

Output

The selected flex item appears before all other items.

Explanation

• order changes the display order of flex items.
• Lower values appear first.
• The default value is 0.

Question 9: Make an Item Grow

Problem Statement

Write CSS to allow a flex item to take up the remaining available space.

CSS Code

.item {    flex-grow: 1;}

Output

The flex item expands to fill the available space inside the container.

Explanation

• flex-grow controls how much an item can grow.
• A value of 1 allows the item to use the remaining space.
• Larger values give an item more space compared to others.

Question 10: Create Equal-Width Flex Items

Problem Statement

Write CSS so that all flex items have equal width.

CSS Code

.container {    display: flex;}.item {    flex: 1;}

Output

All flex items display with equal width.

Explanation

• flex: 1; is a shorthand property.
• It allows each item to grow equally.
• This is commonly used for equal-width columns and responsive layouts.

Key Takeaways

• display: flex; creates a Flexbox container.
• flex-direction changes the layout direction.
• justify-content aligns items along the main axis.
• align-items aligns items along the cross axis.
• flex-wrap moves items onto new lines when needed.
• order changes the display order of flex items.
• flex-grow allows items to expand.
• flex: 1; creates equal-width flexible items.

Frequently Asked Questions (FAQs)

1. What is CSS Flexbox?

CSS Flexbox is a layout model that helps arrange and align items inside a container efficiently.

2. Which property creates a Flexbox container?

Use:

.container {    display: flex;}

3. How do I arrange flex items vertically?

Use:

.container {    flex-direction: column;}

4. How do I center flex items horizontally?

Use:

.container {    justify-content: center;}

5. How do I center flex items vertically?

Use:

.container {    align-items: center;}

6. What does flex-wrap do?

flex-wrap allows flex items to move onto the next line when there isn’t enough space.

Example:

.container {    flex-wrap: wrap;}

7. Where is CSS Flexbox commonly used?

CSS Flexbox is commonly used for:

• Navigation bars
• Cards
• Forms
• Image galleries
• Pricing tables
• Dashboards
• Responsive layouts
• Website headers and footers

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar