Beginner LevelCSS & Modern Layouts
How does CSS Flexbox work and what are its key container and item properties?
❓ Interview Prompt: Explain the Flexbox layout model, its axis system, and the most important container and item properties.
Flexbox is a one-dimensional layout model designed for distributing space along a single axis (row or column).
Container Properties (parent):
•
display: flex — activates flexbox context.•
flex-direction — sets the main axis: row (default), column, row-reverse, column-reverse.•
justify-content — distributes items along the main axis: flex-start, center, space-between, space-around, space-evenly.•
align-items — aligns items along the cross axis: stretch (default), center, flex-start, flex-end, baseline.•
gap — sets spacing between flex items without margins.Item Properties (children):
•
flex-grow — how much the item should grow relative to siblings (default: 0).•
flex-shrink — how much the item should shrink when space is insufficient (default: 1).•
flex-basis — the initial size before growing/shrinking (default: auto).•
align-self — overrides the parent's align-items for a single item.Code Implementation Example
css
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.sidebar { flex: 0 0 250px; } /* Don't grow, don't shrink, fixed 250px */
.content { flex: 1; } /* Grow to fill remaining space */
.aside { flex: 0 0 200px; } /* Fixed 200px sidebar */💡Three-column layout using flex-grow and flex-basis shorthand.
🎯 Interview Key Takeaway
The flex shorthand (flex: grow shrink basis) controls how items share available space along the main axis.
#Flexbox#Layout#Alignment#Beginner
Back to all CSS & Modern Layouts Questions→