CSS Flexbox

Transform any element into a flexible box layout container that arranges its children

Set the main axis direction to control how flex items flow within the container

Control whether flex items wrap to new lines when they overflow the container

Add consistent spacing between flex items without using margins

Align and distribute flex items along the main axis (horizontal by default)

Align flex items along the cross axis (vertical by default) within their line

Align and distribute wrapped lines of flex items within the container

Define how much a flex item should grow relative to other items to fill available space

Define how much a flex item should shrink relative to other items when space is limited

Set the initial main size of a flex item before free space is distributed

Combine grow, shrink, and basis values in a single flexible property

Override the container's align-items value for individual flex items

Change the visual order of flex items without modifying the HTML structure

Perfect centering technique using flexbox for both horizontal and vertical alignment

Common flexbox pattern for creating responsive navigation bars with logo and links

Responsive card layout that automatically adjusts columns based on available space

Classic two-column layout with fixed sidebar and flexible main content area