Flexbox, short for Flexible Box Layout, is a CSS layout module designed for creating flexible and responsive layouts. It allows elements to adjust their size and position based on the available space, making it ideal for complex designs.

Basic Container Setup

To use Flexbox, first set the display property on a container:

.flex-container {
  display: flex;
}

For inline Flexbox:

.flex-container {
  display: inline-flex;
}

For compatibility with older browsers:

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

Core Concepts

Flex containers have two main axes:

• Main axis (horizontal by default)
• Cross axis (vertical by default)

Container Properties

There are six primary container properties:

1. flex-direction

Controls the direction of the main axis:

.flex-container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row: Horizontal layout (default)
• row-reverse: Horizontal layout from right
• column: Vertical layout (top to bottom)
• column-reverse: Vertical layout from bottom

2. flex-wrap

Controls how flex items wrap when they exceed the container width:

.flex-container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap: Items stay in a single line (default)
• wrap: Items wrap to new lines
• wrap-reverse: Items wrap in reverse order

3. flex-flow

This is a shorthand property combining flex-direction and flex-wrap. Default value is row nowrap.

.flex-container {
  flex-flow: <flex-direction> <flex-wrap>;
}
</flex-wrap></flex-direction>

4. justify-content

Aligns items along the main axis:

.flex-container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start: Align items to the start of the main axis
• flex-end: Align items to the end of the main axis
• center: Center items
• space-between: Distribute items with equal spacing
• space-around: Distribute items with equal spacing around each item

5. align-items

Aligns items along the cross axis:

.flex-container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start: Align items to the start of the cross axis
• flex-end: Align items to the end of the cross axis
• center: Center items
• baseline: Align items to their baseline
• stretch: Stretch items to fill container height (default)

6. align-content

Controls alignment when multiple flex lines are present:

.flex-container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start: Align lines to the start of the cross axis
• flex-end: Align lines to the end of the cross axis
• center: Center lines
• space-between: Distribute lines with equal spacing
• space-around: Distribute lines with equal spacing around each line
• stretch: Stretch lines to fill container height (default)

Item Properties

There are five properties that can be applied to flex items:

1. order

Determines the order of items in the flex container. Lower values come first. Default is 0.

.flex-item {
  order: <integer>;
}

2. flex-grow

Controls how much an item can grow to fill available space. Default is 0 (no growth).

.flex-item {
  flex-grow: <number>; /* Default 0 */
}

3. flex-shrink

Controls how much an item can shrink when space is limited. Default is 1 (equal shrinkage).

.flex-item {
  flex-shrink: <number>; /* Default 1 */
}

4. flex-basis

Sets the initial size of an item before flexing. Default is auto (content-based size).

.flex-item {
  flex-basis: <length> | auto; /* Default auto */
}

5. flex

A shorthand property combining flex-grow, flex-shrink, and flex-basis. Default is 0 1 auto.

.flex-item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}

• none: flex-grow: 0, flex-shrink: 0, flex-basis: auto
• auto: flex-grow: 1, flex-shrink: 1, flex-basis: auto

6. align-self

Overrides the container's align-items property for individual items. Default is auto (inherit container's alignment).

.flex-item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}