What is CSS Flexbox?

Flexbox is a CSS layout model for arranging elements along one axis. It is useful for aligning buttons in a row, distributing content inside a card, or keeping menu items flexible as available space changes.

How Does It Work?

Flexbox has a flex container and flex items inside it. display: flex is applied to the container. flex-direction chooses whether the main axis is a row or a column. justify-content aligns items on the main axis, while align-items aligns them on the cross axis. gap controls spacing between items.

Item growth and shrinking are controlled with flex-grow, flex-shrink, and flex-basis. For example, a search input can fill the remaining width while an icon button next to it stays fixed.

Difference from Grid

Flexbox is strongest for one-dimensional layouts: row or column. Grid layout is better for two-dimensional page structures where rows and columns must be controlled together.

In everyday interface work, both are often used together. The main page skeleton may use grid, while the title, actions, and metadata inside a card use flexbox.