What is Flexbox?

Flexbox, short for the Flexible Box Layout module, is a one-dimensional layout method in CSS designed to distribute space among items within a single row or column. It provides a more efficient way to align and distribute space among items in a container, even when their sizes are unknown or dynamic.

Unlike traditional block layout (which is vertical) and inline layout (which is horizontal), Flexbox operates on a single axis at a time – either a row (horizontal) or a column (vertical). This makes it ideal for components like navigation menus, card grids, and any scenario where you need to align items flexibly.

Flex Container and Flex Items

Flexbox consists of two main components:

• Flex Container: This is the parent element on which you apply display: flex; (or display: inline-flex;). It defines the flex context for its direct children.
• Flex Items: These are the direct children of the flex container. Once their parent becomes a flex container, they become flex items and their layout behavior is controlled by Flexbox properties.

Enabling Flexbox

To start using Flexbox, simply set the display property of a parent element to flex:

.flex-container {
    display: flex; /* Makes the element a flex container */
}

Properties for the Flex Container

These properties are applied to the parent element (the flex container).

flex-direction

Establishes the main-axis, thus defining the direction flex items are placed in the flex container.

• row (default): Items are arranged horizontally, from left to right.
• row-reverse: Items are arranged horizontally, from right to left.
• column: Items are arranged vertically, from top to bottom.
• column-reverse: Items are arranged vertically, from bottom to top.

.flex-container {
    flex-direction: column;
}

justify-content

Aligns flex items along the **main-axis** of the flex container.

• flex-start (default): Items are packed towards the start of the flex-direction.
• flex-end: Items are packed towards the end of the flex-direction.
• center: Items are centered along the line.
• space-between: Items are evenly distributed in the line; first item is at the start, last item at the end.
• space-around: Items are evenly distributed in the line with equal space around them.
• space-evenly: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

.flex-container {
    justify-content: center;
}

align-items

Aligns flex items along the **cross-axis** (perpendicular to the main-axis).

• stretch (default): Items are stretched to fill the container (but still respect min-width/max-width).
• flex-start: Items are packed towards the start of the cross-axis.
• flex-end: Items are packed towards the end of the cross-axis.
• center: Items are centered along the cross-axis.
• baseline: Items are aligned such that their baselines align.

.flex-container {
    align-items: flex-end;
}

flex-wrap

By default, flex items will try to fit onto one line. This property sets whether flex items are forced onto one line or can wrap onto multiple lines.

• nowrap (default): All flex items will be on one line.
• wrap: Flex items will wrap onto multiple lines, from top to bottom.
• wrap-reverse: Flex items will wrap onto multiple lines, from bottom to top.

.flex-container {
    flex-wrap: wrap;
}

Properties for the Flex Items

These properties are applied to the direct children of the flex container (the flex items).

flex-grow

Defines the ability for a flex item to grow if necessary. It accepts a unitless proportion value.

.flex-item {
    flex-grow: 1; /* Item will grow to take up available space */
}

flex-shrink

Defines the ability for a flex item to shrink if necessary. It accepts a unitless proportion value.

.flex-item {
    flex-shrink: 0; /* Item will not shrink */
}

flex-basis

Defines the default size of an element before the remaining space is distributed. It can be a length (e.g., 200px) or a keyword like auto (which means "look at my width/height property" or "size to my content").

.flex-item {
    flex-basis: 150px;
}

flex Shorthand

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.

.flex-item {
    flex: 1 1 auto; /* grow, shrink, basis */
    /* Equivalent to: flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
}

.flex-item-fixed {
    flex: 0 0 100px; /* Item will not grow or shrink, basis 100px */
}

order

By default, flex items are laid out in the source order. The order property controls the order in which flex items appear in the flex container, overriding the source order. It accepts an integer value (defaults to 0).

.item-first {
    order: -1;
}
.item-last {
    order: 1;
}

align-self

This property allows individual flex items to override the align-items property set on the flex container. It takes the same values as align-items.

.item-override {
    align-self: center;
}

Practical Use Cases for Flexbox

Flexbox is incredibly versatile and is used for a wide range of layout challenges:

• Navigation Bars: Creating horizontally aligned menu items that distribute space evenly.
• Card Layouts: Arranging cards in rows, ensuring equal height or alignment, and wrapping them responsively.
• Form Elements: Aligning labels with input fields or placing buttons next to each other.
• Vertical Centering: Easily centering content vertically and horizontally within a container.