What is Flexbox?
Flexbox is a layout model in CSS designed for conveniently arranging elements in one direction: as a row or as a column. It lets you easily align, distribute, and reorder elements inside a container without using float, tables, or chaotic spacing.
Key features of Flexbox
- works inside a flex container (
display: flex) - direction can be chosen: horizontal or vertical (
flex-direction) - elements can stretch, shrink, and distribute evenly
- there is flexible centering on both axes (
justify-contentandalign-items) - element order can be changed without changing the HTML (
order)
What this looks like in CSS
css
.container {
display: flex;
flex-direction: row; /* or column */
justify-content: center; /* alignment along the main axis */
align-items: center; /* alignment along the cross axis */
}What Flexbox is used for
- building horizontal menus
- centering elements (vertically and horizontally)
- cards in a row with equal spacing
- responsive blocks that shrink and stretch on their own
- controlling spacing between elements without margin hacks
The essence in one sentence: Flexbox is a flexible single-axis layout system that simplifies the placement and alignment of elements inside a container.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.