Flexbox, short for the Flexible Box Layout Module, is a CSS layout model designed to make it easier to align and distribute space among items in a container. Before Flexbox, developers relied on floats, inline-block, and positioning hacks to build layouts — techniques that were often fragile and difficult to maintain.

Flexbox works along two axes: the main axis and the cross axis. The main axis is defined by the flex-direction property and determines the direction flex items flow. The cross axis runs perpendicular to the main axis. Understanding these two axes is the foundation of everything Flexbox does.

Flexbox is best suited for one-dimensional layouts — meaning it handles either a row or a column at a time. For two-dimensional layouts involving both rows and columns simultaneously, CSS Grid is the better tool. That said, Flexbox is incredibly powerful for components like navigation bars, card rows, centered content, and form layouts.

The flex container is the parent element that holds all of the flex items. You create a flex container by applying display: flex; to any element. Once you do that, all direct children of that element automatically become flex items and begin following flexbox rules.

The flex-direction property controls which direction the main axis runs, determining how items are laid out inside the container. The default value is row, which arranges items horizontally left to right. You can also set it to column to stack items vertically, or use row-reverse and column-reverse to flip the order.

Another key container property is flex-wrap. By default, flex items will try to fit onto one line even if it means shrinking them. Setting flex-wrap: wrap; allows items to spill onto multiple lines when there isn't enough space, giving your layout much more flexibility across different screen sizes.

• display: flex — activates flexbox on the container
• flex-direction — sets the direction of the main axis
• flex-wrap — controls whether items wrap to new lines

Flex items are the direct children of a flex container. While the container controls the overall layout direction and wrapping, flex items have their own set of properties that control how each individual item grows, shrinks, and sizes itself within the available space.

The flex-grow property defines how much an item will grow relative to the other items when there is extra space in the container. A value of 1 means the item will take up an equal share of the remaining space. If one item has flex-grow: 2 and another has flex-grow: 1, the first item will grow twice as much as the second.

The flex-shrink property works in the opposite direction — it determines how much an item will shrink when there isn't enough space. The default value is 1, meaning all items shrink equally. Setting it to 0 prevents an item from shrinking at all, which is useful when you need an element to maintain a fixed size regardless of the container width.

• flex-grow — controls how much an item expands to fill space
• flex-shrink — controls how much an item contracts when space is limited

One of Flexbox's most celebrated features is how easily it handles alignment. The justify-content property aligns items along the main axis. Common values include flex-start, flex-end, center, space-between, and space-around. This single property replaces a lot of the margin math developers used to do manually.

The align-items property controls alignment along the cross axis — perpendicular to the main axis. Setting align-items: center; on a flex container will vertically center all of its children when the main axis is horizontal. This made vertical centering in CSS genuinely simple for the first time, something developers had struggled with for years.

The gap property adds consistent spacing between flex items without needing to add margins to individual elements. You can set a single value like gap: 16px; to apply equal spacing in all directions, or pass two values to control row and column gaps separately. Combined with justify-content and align-items, gap gives you precise control over the entire layout.

One of the most common Flexbox use cases is building a navigation bar. By setting display: flex on a