DEV Community

Vigneshwaralingam
Vigneshwaralingam

Posted on

💪 CSS Flexbox — What, When, Why, Which, How, Differences, Examples, and Interview Q\&A

❓ What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout system in CSS used to align and distribute space among items inside a container. It works in either a row or a column, but not both at the same time.

🕒 When to Use Flexbox?

Use Flexbox when:

  • You want to align elements horizontally or vertically
  • You want to space items evenly
  • You need to build responsive layouts
  • You want easy alignment without using floats or position

💡 Why is Flexbox Important?

  • It simplifies layout design
  • Handles resizing and spacing automatically
  • Replaces old hacks like float, inline-block, and positioning
  • Great for navbars, cards, buttons, galleries, footers, and more

🔍 Which Properties Does Flexbox Use?

➤ Container Properties:

  • display: flex;
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • gap

➤ Item Properties:

  • flex
  • align-self
  • order
  • flex-grow, flex-shrink, flex-basis

⚙️ How to Use Flexbox?

🧱 Step 1: Make a container a flex container 

.container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

🧱 Step 2: Apply other Flexbox properties to control layout

📊 Flexbox Differences Table

Property Description Common Values
flex-direction Direction of items row, column, row-reverse, column-reverse
justify-content Horizontal alignment of items flex-start, center, space-between, space-around, space-evenly
align-items Vertical alignment (cross-axis) flex-start, center, stretch, baseline
flex-wrap Whether items wrap or not nowrap, wrap, wrap-reverse
align-self Align a single item Same as align-items, but per item
order Rearranges item order Number (e.g., order: 2)
gap Adds space between flex items e.g., gap: 10px

📌 Examples of Flexbox Use

🔹 Example 1: Center Items 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
Enter fullscreen mode Exit fullscreen mode

🔹 Example 2: Horizontal Navbar 

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

🔹 Example 3: Wrap Cards 

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

🔹 Example 4: Column Layout 

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

🧠 Interview Questions & Answers – CSS Flexbox

✅ 1. What is Flexbox?

Answer:
Flexbox is a one-dimensional layout system in CSS used to align and space items in a container, either in a row or column.

✅ 2. What’s the difference between justify-content and align-items?

Answer:

  • justify-content: aligns items along the main axis (row or column)
  • align-items: aligns items along the cross axis

✅ 3. How do you center an element both horizontally and vertically using Flexbox?

Answer:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

✅ 4. What is the default flex-direction?

Answer:
row — items are placed left to right horizontally.

✅ 5. What is flex-wrap, and when would you use it?

Answer:
flex-wrap allows items to wrap onto multiple lines instead of overflowing. Useful in responsive grids and card layouts.

.container {
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

✅ 6. What does flex: 1 mean?

Answer:
flex: 1 is a shorthand for:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

It means the element will grow to fill available space equally with other flex items.

✅ 7. How do you control spacing between Flex items?

Answer:
Use gap, margin, or justify-content:

.container {
  display: flex;
  gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

✅ 8. What is the use of order in Flexbox?

Answer:
It changes the visual order of items, without changing the HTML structure.

✅ 9. What happens if one item has flex-grow: 2 and others have flex-grow: 1?

Answer:
That item will take twice as much space as the others.

✅ 10. Can Flexbox and Grid be used together?

Answer:
Yes. You can use Flexbox for one-dimensional layouts inside Grid areas or vice versa. Combining both gives powerful layout control.

Top comments (1)

Collapse
 
chariebee profile image
Charles Brown •

Nice breakdown, super clear!