What is Flexbox in CSS?
Learn what CSS Flexbox is, how the main and cross axes work, and how to use justify-content, align-items, and flex-grow to build responsive layouts.
Expected Interview Answer
Flexbox is a one-dimensional CSS layout model that lets a container distribute space among its children along a single main axis, making it easy to align, order, and resize items without floats or manual positioning.
You turn a container into a flex container with display: flex, which arranges its direct children — flex items — along a main axis controlled by flex-direction (row or column) and a perpendicular cross axis. justify-content aligns items along the main axis, align-items aligns them along the cross axis, and flex-wrap lets items wrap onto multiple lines when they don't fit. Individual items can grow, shrink, or claim a base size via flex-grow, flex-shrink, and flex-basis (often shorthand as flex), letting you build flexible navbars, card rows, and centered layouts with just a few properties. Flexbox is one-dimensional by design; for two-dimensional layouts (rows and columns together) CSS Grid is generally the better tool.
- Centers content vertically and horizontally without hacks
- Distributes and aligns space along one axis with a handful of properties
- Reorders visual layout independent of source order via the order property
- Handles wrapping and responsive resizing without media-query-heavy code
- Replaces older float and inline-block layout hacks
AI Mentor Explanation
Flexbox is like a captain arranging fielders along one boundary line for a specific over — display: flex names the field as flexible, flex-direction sets whether they line up along the leg side or off side, and justify-content spaces them evenly so no gap goes uncovered. align-items then decides how deep or square each fielder stands relative to that same line.
Step-by-Step Explanation
Step 1
Create the flex container
Apply display: flex (or inline-flex) to a parent element to turn its direct children into flex items.
Step 2
Choose the main axis
flex-direction: row (default) or column decides whether items lay out horizontally or vertically.
Step 3
Align along the main axis
justify-content controls spacing and alignment of items along the main axis (start, center, space-between, etc.).
Step 4
Align along the cross axis
align-items aligns items along the perpendicular axis; align-content controls spacing between wrapped lines.
Step 5
Control individual item sizing
flex-grow, flex-shrink, and flex-basis (or the flex shorthand) decide how each item grows or shrinks to fill available space.
Step 6
Allow wrapping when needed
flex-wrap: wrap lets items flow onto new lines instead of shrinking indefinitely or overflowing.
What Interviewer Expects
- Explains flexbox as a one-dimensional layout model
- Names the main axis vs cross axis distinction
- Knows the difference between justify-content and align-items
- Can describe flex-grow/shrink/basis for item sizing
- Knows when Grid is a better fit than Flexbox
Common Mistakes
- Confusing justify-content (main axis) with align-items (cross axis)
- Forgetting flex-direction: column flips which axis is 'main'
- Using Flexbox for full two-dimensional grid layouts instead of CSS Grid
- Not setting flex-wrap and being surprised items overflow instead of wrapping
- Assuming flex-grow works without also considering flex-basis
Best Answer (HR Friendly)
“Flexbox is a CSS tool that makes it easy to line up and space out items on a webpage, like buttons in a navigation bar or cards in a row. It automatically handles alignment, spacing, and resizing so the layout looks good on any screen size.”
Code Example
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between; /* main axis */
align-items: center; /* cross axis */
flex-wrap: wrap;
}.card-row .card {
flex: 1 1 200px; /* grow, shrink, basis */
}
.card-row .card.featured {
flex-grow: 2; /* claims twice the extra space */
}Follow-up Questions
- What's the difference between justify-content and align-items?
- How does flex-grow interact with flex-basis when sizing items?
- When would you choose CSS Grid over Flexbox?
- How does flex-wrap change the layout when items don't fit on one line?
- How can the order property reorder items without changing the HTML?
MCQ Practice
1. Which property turns a container's children into flex items?
Setting display: flex on the parent container makes its direct children flex items, laid out along the main axis.
2. Which property aligns flex items along the cross axis?
align-items controls alignment along the cross axis, perpendicular to the main axis set by flex-direction.
3. What does flex-wrap: wrap do?
flex-wrap: wrap lets flex items move onto new lines when they can't all fit within the container's main-axis size.
Flash Cards
What CSS property creates a flex container? — display: flex (or display: inline-flex) on the parent element.
Main axis vs cross axis? — The main axis is set by flex-direction; the cross axis runs perpendicular to it.
justify-content vs align-items? — justify-content aligns items on the main axis; align-items aligns them on the cross axis.
What does the flex shorthand set? — flex-grow, flex-shrink, and flex-basis in one declaration, e.g. flex: 1 1 200px.