🎯 What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model designed to make it easier to design responsive layout structures without using floats or positioning.

It enables you to distribute space dynamically between items in a container and align content vertically and horizontally with ease.

🧱 The Two Key Components

1. Flex Container

The parent element where display: flex; (or display: inline-flex;) is applied.

css

CopyEdit

.container { display: flex; }

2. Flex Items

All direct children of the flex container become flex items and are affected by flex properties.

🔧 Flex Container Properties

1. `display: flex | inline-flex`

Starts the flex formatting context.

css

CopyEdit

.flexbox { display: flex; /* block-level flex container */ }

2. `flex-direction`

Defines the main axis (horizontal or vertical).

ValueDescriptionrow (default)Left to right (LTR)row-reverseRight to leftcolumnTop to bottomcolumn-reverseBottom to top

css

CopyEdit

.flexbox { flex-direction: row; }

3. `flex-wrap`

Allows items to wrap onto multiple lines.

ValueDescriptionnowrapAll items on one line (default)wrapWrap onto multiple lineswrap-reverseWrap in reverse order

css

CopyEdit

.flexbox { flex-wrap: wrap; }

4. `justify-content`

Aligns items horizontally along the main axis.

ValueDescriptionflex-startStart of main axisflex-endEnd of main axiscenterCenter of main axisspace-betweenEqual space between itemsspace-aroundEqual space around itemsspace-evenlyEqual space between and around

css

CopyEdit

.flexbox { justify-content: space-between; }

5. `align-items`

Aligns items vertically (cross-axis).

ValueDescriptionstretchStretch to fill (default)flex-startAlign to cross-startflex-endAlign to cross-endcenterCenter along cross-axisbaselineAlign based on text baseline

css

CopyEdit

.flexbox { align-items: center; }

6. `align-content`

Aligns rows (when there are multiple rows, with wrap).

ValueDescriptionstretchFill container (default)flex-startPacked at topflex-endPacked at bottomcenterCentered rowsspace-betweenEqual spacing between rowsspace-aroundEqual spacing around rows

css

CopyEdit

.flexbox { flex-wrap: wrap; align-content: center; }

📦 Flex Item Properties

1. `order`

Controls the visual order of items.

css

CopyEdit

.item { order: 2; /* higher number → later */ }

2. `flex-grow`

Defines how much a flex item will grow relative to others.

css

CopyEdit

.item { flex-grow: 1; /* grows to fill available space */ }

3. `flex-shrink`

Defines how a flex item shrinks if space is tight.

css

CopyEdit

.item { flex-shrink: 1; /* default, item can shrink */ }

4. `flex-basis`

Sets the initial size before growing or shrinking.

css

CopyEdit

.item { flex-basis: 200px; /* overrides width */ }

5. `flex` (shorthand)

A shorthand for: flex-grow, flex-shrink, and flex-basis.

css

CopyEdit

.item { flex: 1 1 200px; }

Common quick uses:

flex: 1; → Grow/shrink equally
flex: 0 1 auto; → No grow, shrink if needed

6. `align-self`

Overrides align-items for individual items.

css

CopyEdit

.item { align-self: center; }

📐 Example Layout

html

CopyEdit

<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>

css

CopyEdit

.container { display: flex; justify-content: space-between; align-items: center; height: 100px; background: #f2f2f2; } .item { background: #0070f3; color: white; padding: 20px; }

Mastering CSS Flexbox

CSS Flexbox

More posts