CSS · Layout and visual systems
How does Flexbox work?
Short answer
Flexbox lays out items in one dimension along a main axis and a cross axis. Containers control direction, wrapping, distribution and alignment; items control grow, shrink and basis.
A flex container turns its direct children into flex items. The main axis follows flex-direction, and the cross axis is perpendicular to it. The browser resolves the items' base sizes, distributes free space through grow and shrink, then aligns them.
.row {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
flex: 1 1 12rem;
}Container and item properties
- justify-content distributes items on the main axis
- align-items aligns items on the cross axis
- flex-direction switches between row and column
- flex-grow, flex-shrink and flex-basis control how an item claims or gives up space
- gap spaces items without margins
- flex-wrap allows items to move onto new lines
The flex shorthand is grow, shrink and basis. flex: 1 means 1 1 0%, so items share free space from a zero basis. Item content still imposes a minimum size because min-width defaults to auto on flex items.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between the main and cross axis?
- 2What does flex: 1 expand to?
- 3Why does a flex item refuse to shrink below its content?
- 4When do you use align-items versus justify-content?
Say it in the interview
Flexbox is one-dimensional. The container sets the main axis with flex-direction and distributes or aligns items with justify-content and align-items. Items control their size with grow, shrink and basis, and gap handles spacing. I remember that flex one means grow and shrink with a zero basis, and that min-width auto can stop an item from shrinking until I override it.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.