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?

Ques: What is flex-direction used for?

Ans: Defines the main axis direction of flex items.

Example:

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

Ques: What does justify-content do?

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

Example:

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

Ques: What does align-items do?

Ans: Aligns items vertically (cross-axis).

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.

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?

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?

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;
}