CSS Flexbox (Flexible Box Layout) is a one-dimensional CSS layout model designed for arranging items in rows or columns. It provides an efficient way to distribute space and align content within a container, even when item sizes are unknown or dynamic. Flexbox was introduced to solve common layout problems that were difficult with floats and positioning.

A Flexbox layout consists of two main components: the flex container (the parent element with display: flex) and flex items (the direct children of the container). The container controls the overall layout direction and alignment, while items can individually control their sizing and positioning within the container.

The main axis is the primary direction flex items are placed — horizontal by default (when flex-direction is row). The cross axis runs perpendicular to the main axis — vertical by default. When you change flex-direction to column, the main axis becomes vertical and the cross axis becomes horizontal. Understanding these axes is key to mastering Flexbox alignment.

Yes, CSS Flexbox has excellent browser support. All modern browsers — Chrome, Firefox, Safari, Edge, and Opera — fully support Flexbox without vendor prefixes. Support has been stable since around 2015, making it completely safe for production use.

The flex-direction property sets the main axis direction. Values include: row (left to right, default), row-reverse (right to left), column (top to bottom), and column-reverse (bottom to top). This property fundamentally changes how items are laid out in the container.

justify-content controls alignment along the main axis (horizontal in row direction). align-items controls alignment along the cross axis (vertical in row direction). Common values for justify-content include center, space-between, and space-around. Common values for align-items include center, stretch, and baseline.

The flex-grow property determines how much a flex item should grow relative to other items when there is extra space in the container. The default value is 0, meaning items won't grow. If one item has flex-grow: 2 and another has flex-grow: 1, the first item will take twice as much of the available extra space.

The flex-basis property sets the initial size of a flex item along the main axis before any growing or shrinking occurs. It can be a fixed value (e.g., 200px), a percentage (e.g., 50%), or auto (uses the item's content width/height). It is similar to width/height but specific to flex layouts.

The flex shorthand combines three properties: flex-grow, flex-shrink, and flex-basis. Common values: flex: 1 (grow equally), flex: 0 0 auto (don't grow or shrink, use content size), flex: 1 1 0% (grow/shrink equally from zero base). It's the recommended way to set flex item sizing.

The flex-wrap property controls whether flex items are forced onto a single line or can wrap to multiple lines. Values: nowrap (default — all items on one line), wrap (items wrap to next line), and wrap-reverse (items wrap in reverse order). This is essential for responsive layouts.

Set the parent container to display: flex; justify-content: center; align-items: center;. This centers the child both horizontally and vertically. For full-page centering, also add min-height: 100vh to the container. Try it in our interactive generator.

Flex items in a row are equal height by default because align-items defaults to stretch. Simply set display: flex on the parent, and all children will stretch to match the tallest item. See our card grid example.

Use Flexbox for one-dimensional layouts — arranging items in a single row or column. Use CSS Grid for two-dimensional layouts where you need precise control over both rows and columns. Many modern layouts combine both: Grid for the overall page structure and Flexbox for component-level alignment.

Combine flex-wrap: wrap with flex-basis to create responsive layouts. Set a minimum width with flex-basis (e.g., flex: 1 1 300px) and items will automatically wrap when the container is too narrow. Use media queries to adjust flex properties at different screen sizes. Browse our examples for responsive patterns.

Yes, any flex item can also be a flex container by applying display: flex to it. This is a common pattern for complex layouts. For example, a navigation bar might use a flex container for the main layout, with nested flex containers for grouping links.

Wrap your page in a flex container with display: flex; flex-direction: column; min-height: 100vh;. Set the main content area to flex-grow: 1 so it expands to fill available space, pushing the footer to the bottom. See our footer example.