What is Flexbox, and when would you use it?

Question

Accepted Answer

Flexbox, or the Flexible Box Layout, is a CSS layout model designed for arranging items in one dimension, either as a row or a column.

To use Flexbox, set display: flex on a container element. The direct children become flex items that you can align, distribute, and size flexibly.

Key properties on the container include flex-direction to set the main axis, justify-content to align items along the main axis, align-items to align items along the cross axis, and gap to add spacing between items.

Key properties on items include flex-grow to control how items expand, flex-shrink to control how items shrink, and flex-basis to set the initial size.

Use Flexbox when you need to lay out items in a single row or column, center content vertically and horizontally, distribute space evenly between items, or create navigation bars, card layouts, and form controls.

Here is a common centering pattern:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Flexbox handles dynamic content well. Items automatically wrap, shrink, or grow based on available space. This makes it ideal for responsive designs where content size varies.

Compare to Grid, which is better for two-dimensional layouts. Flexbox handles rows or columns. Grid handles both simultaneously. Often you use Grid for the overall page layout and Flexbox for component-level alignment.