Flexbox

The Flex Container, also known as the Box of Flexibility, is a truly magical invention. Inside, order reigns—even when things are far from still. The flex items, as the objects within this box are called, possess a remarkable quality: they adapt to the space available to them, like enchanted pieces on a magical board that nestle perfectly into gaps, no matter how large or small.

With the command display: flex, you line up your flex items neatly in a horizontal row. But beware! Without clear instructions, your items might tumble out of the box, leaving behind the dreaded horizontal scrollbar—a foreboding mistake to avoid. If you want them to behave and stay within the container, you must teach them the proper way to align themselves.

Sometimes your flex items need a little breathing space. With flex-wrap, you can gently distribute them across multiple rows or columns, rather than letting them tumble chaotically off the screen. But beware: give the children a defined size, or they’ll all crowd into a single row.

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

.flex>div {
    width: 25%;
}

Alternatively, use nowrap if you want all the children to line up obediently in a single row. For direct children like div, assign a fixed size of 25% to ensure they are evenly spaced.

With flex-direction, you decide whether your flex items align in a row or a column. It’s like telling them: “side by side” (row) or “stacked up” (column).

.flex {
    display: flex;
    flex-direction: row;
}

Use flex-direction: row; to arrange your flex items horizontally, from left to right.

flex-flow is the shorthand for flex-direction and flex-wrap. It allows you to combine both properties into a single spell.

.flex {
    display: flex;
    flex-flow: row wrap;
}

Arrange your flex items in a row and wrap them to the next line if needed.

With column-reverse, you send your flex items on an upside-down journey, aligning them vertically from bottom to top. For horizontal adventures, there’s row-reverse, which orders everything backward—perfect for flipping the usual flow.

.flex {
    display: flex;
    flex-direction: column-reverse;
}

Reverse the vertical order of your flex items for a topsy-turvy layout.

The gap property creates space between your flex items without disrupting their order—like an invisible buffer ensuring they don’t step on each other’s toes. It’s as if small walls were placed between your flex items, giving them room to breathe.

.container {
    display: flex;
    gap: 20px 5px;
}

With a single value like gap: 10px, you apply equal spacing everywhere. With two values, like gap: 10px 20px, you first set the vertical and then the horizontal spacing—entirely to your liking.

justify-content

Horizontal Balance

The art of justify-content lies in balancing your flex items along the horizontal axis. Imagine a spell that determines whether the items huddle on the left, gather in the center, or stretch out to the right edge of the magical container. For even greater elegance, you can evenly distribute them with space between or around each item—whatever your flex heart desires!

Key spells include:

flex-start / start:
Items huddle on the left (default).
flex-end / end:
Items shift all the way to the right.
center:
Everything gathers in the middle ceremoniously.
space-between:
Items spread evenly, with space in between.
space-around:
A touch of space floats around each item.

align-items

The Vertical Magic of Flexbox

The art of align-items lies in aligning your flex items along the vertical axis. Imagine a spell that decides whether the items gather snugly at the top, harmonize in the center, or settle at the bottom of the magical box. For added finesse, you can stretch them to fill the container or align them by their text baselines—whatever suits your flex vision!

Key Spells:

flex-start / start:
Items gather at the top or the start of the cross-axis.
flex-end / end:
Items settle at the bottom.
center:
Items align harmoniously in the middle.
stretch:
Items expand to fill the container’s height
(if possible).
baseline:
Items align along their text baselines,
as if on an invisible line.

With order, you assign each flex item its own position, completely independent of its order in the HTML code. You are the director, and the flex items perform exactly as you command.

.item {
    order: 2;
}

For example, order: 2; moves a flex item to the second position, no matter where it originally appeared.

align-self lets you adjust the alignment of a single item along the cross-axis, regardless of how the other flex items are aligned. It’s particularly handy when you want one element to break ranks and stand out while the others stay obediently in line.

.item {
		align-self:center;
}

It offers the same values as align-items but applies specifically to an individual item, while the rest follow the container’s general alignment.

If you want all columns in your flex container to be the same size, use the command flex: 1;. This ensures that each flex item takes up an equal share of the available space, like a magical formula balancing their sizes. No matter how many items you have, each one will get an equal portion, creating evenly distributed columns without needing to set specific widths.

.item {
		flex:1;
}

In this example, all items share the available space equally, filling the container width evenly—making every column the same size effortlessly.

flex-grow is a magical command that allows a flex item to take up more space when there’s extra room in the container. With this property, you can decide how much an item should grow when the container is larger than the total space required by the items.

0: The item doesn’t grow—it stays its original size (default).

1 or higher: The item grows and takes up extra space proportionally to the other items.

.item1 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

For example, if item2 has a flex-grow value of 2, it will take twice as much extra space as item1 when there’s room left in the container. This lets you control how free space is distributed among the items!

flex-shrink is the counter-spell to flex-grow—it controls how much a flex item should shrink when space in the container becomes limited. This property lets you decide whether and how strongly an item should be reduced in size when there’s not enough room for all items.

0: The item doesn’t shrink—it keeps its original size, even if space is tight.
1 or higher: The item shrinks. The larger the value, the more it shrinks compared to other items.

.item1 {
    flex-shrink: 1;
}

.item2 {
    flex-shrink: 2;
}

For example, in this setup, item2 will shrink more aggressively than item1 when the container gets too small. This allows you to prioritize which items should shrink first in tight spaces.

flex-basis defines the initial size of a flex item before it starts growing or shrinking. It’s the solid starting point for your flex magic.

.item {
    flex-basis: 200px;
}

For example, you can set an item to start with a fixed width of 200px, while other items can be given unique base sizes. This ensures a consistent foundation for your layout.

The flex shorthand combines flex-grow, flex-shrink, and flex-basis in a single line, letting you define exactly how an item should grow, shrink, and spread.
Example:
With flex: 1 1 12em;, the item starts with a base size of 12em, can grow if there’s extra space, and will shrink if the container becomes too small. It’s a versatile and flexible solution for layouts of any size.

.item {
    flex: 1 1 12em;
}

This item has a base of 12em, the ability to grow, and the flexibility to shrink, adapting perfectly to available space.