CSS Flexbox — Interview Questions & Answers

Flexbox in CSS

Ques: What is Flexbox, and why is it used?

Ans: Flexbox (Flexible Box Layout) is a one-dimensional layout system in CSS used to arrange elements in rows or columns efficiently. It simplifies alignment, spacing, and distribution — especially when building responsive designs.

It focuses on one dimension at a time — either row or column.

Example:

.container {
  display: flex;
}

Ques: What are the main components of Flexbox?

1. Flex Container — The parent element with display: flex.
2. Flex Items — The direct children of the flex container.

Example:

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

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

Ques: What are the Flex Container properties?

Property	Description
display: flex	Enables flexbox on the container
flex-direction	Defines direction of flex items (row, column, etc.)
flex-wrap	Allows items to wrap to the next line
justify-content	Aligns items horizontally
align-items	Aligns items vertically
align-content	Aligns multiple lines of flex items
gap	Adds spacing between items

Ques: What is flex-direction used for?

Ans: Defines the main axis direction of flex items.

Value	Description
row	Left to right (default)
row-reverse	Right to left
column	Top to bottom
column-reverse	Bottom to top

Example:

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

Ques: What does justify-content do?

Ans: It controls horizontal alignment (along the main axis).

Value	Description
flex-start	Aligns items to the start
center	Centers items
flex-end	Aligns items to the end
space-between	Equal space between items
space-around	Equal space around items
space-evenly	Equal spacing everywhere

Example:

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

Ques: What does align-items do?

Ans: Aligns items vertically (cross-axis).

Value	Description
flex-start	Align to top
center	Align to middle
flex-end	Align to bottom
stretch	Stretch to fill container
baseline	Align based on text baseline

Example:

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

Ques: What does align-content do?

• It aligns multiple rows or columns when items wrap.
• It works only if flex-wrap: wrap is used.

Example:

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

Ques: What is the flex-wrap property?

Ans: It decides whether flex items stay in one line or wrap to the next.

Value	Description
nowrap	All items on one line (default)
wrap	Items wrap onto multiple lines
wrap-reverse	Wraps in reverse order

Example:

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

Ques: What is the shorthand flex-flow property?

Ans: flex-flow combines both flex-direction and flex-wrap in one line.

Example:

.container {
  flex-flow: row wrap;
}

Ques: What are Flex Item properties?

Property	Description
order	Controls item order
flex-grow	How much an item grows relative to others
flex-shrink	How much it shrinks
flex-basis	Initial size before growing/shrinking
align-self	Overrides container’s align-items for a specific item
flex	Shorthand for grow, shrink, basis

Ques: What does flex shorthand mean?

Ans: flex: grow shrink basis

Example:

.item {
  flex: 1 1 200px;
}

Meaning:

• Grow = 1 (can expand)
• Shrink = 1 (can shrink)
• Basis = 200px (starting size)

Ques: What is order used for?

Ans: The order property defines display order of flex items (without changing HTML).

Example:

.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }

Ques: What is align-self?

Ans: Allows an individual item to override the container’s align-items rule.

Example:

.item {
  align-self: flex-end;
}

Ques: What is the difference between Flexbox and Grid?

Feature	Flexbox	Grid
Layout type	One-dimensional	Two-dimensional
Axes	Main + Cross	Rows + Columns
Use case	Aligning items in a line	Full page layouts

Ques:What are common use cases of Flexbox?

• Centering elements (vertically & horizontally)
• Creating navigation bars
• Building responsive card layouts
• Equal height columns
• Flexible buttons and input groups

Ques: How to center a div using Flexbox?

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}