Flexbox Guide
Tags: css, flexbox, cheatsheet
Published: 2022-07-31 18:31:01

## Properties

Many of the properties of flexbox can become a little confusing after just learning it. This can be a guide to help with basic understanding of what it does.

### [Parent (flex container)](#parent-properties)

- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- gap, row-gap, column-gap

### [Children (flex items)](#children-properties)

- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
- justify-self

---

## Parent Properties

### display

This defines a flex container. All children will be a `flex` item.

```css
.flex-container {
  display: flex;
}
```

### flex-direction

This defines the main axis. This will make the flex items either in rows or columns in either normal or reversed directions.

| Values | Description |
| --- | --- |
| row | left to right |
| row-reverse | right to left |
| column | top to bottom |
| column-reverse | bottom to top |

**NOTE:**

Default value is `row` when `display: flex` is the only `flex` property in the container.

> Setting `flex-direction` will build items based on their `width` and `height` properties. If set lower than the size of the container, a gap will be at the end of the direction.

### flex-wrap

Without a wrap property, items will try to be on the same line. Enabling `flex-wrap` will allow items to move to the next line based on the width.

| Values | Description |
| --- | --- |
| row    | wrap items from top to bottom |
| wrap-reverse | wrap items from bottom to top |
| nowrap | all items will be on one line |

### flex-flow

Shorthand for `flex-direction` and `flex-wrap`, which can be used to form a one-line syntax. Default values are `row nowrap`

```CSS
.flex-container {
  display: flex;
  flex-flow: row-reverse wrap-reverse;

  /* Same as 
  flex-direction: row-reverse; 
  flex-wrap: wrap-reverse; */
}
```

### justify-content

Defines alignment along the main axis.

| Values | Description |
| --- | --- |
| flex-start | Items are packed toward the start of the `flex-direction` |
| flex-end | Items are packed toward the end of the `flex-direction` |
| start | Items are packed toward the start of the writing-mode direction |
| end | Items are packed toward the end of the writing-mode direction |
| left | Items are packed toward the left of the container |
| right | Items are packed toward the right of the container |
| center | Items are center along the line |
| space-between | Items are evenly distributed in the line with the first on the start line and last item on the end line |
| space-around | Items evenly distributed within the line between and half on the outside |
| space-evenly | Items will be distributed with same spacing between items and the `start` and `end` of the container |

Two additional keywords go along with this property with values : `safe` and `unsafe`.

Safe will prevent items from rendering off-screen and unable to be scrolled to.

### align-items

Defines behavior along the cross axis, similar to how `justify-content` works.

| Values | Description |
| --- | --- |
| stretch | Stretches columns to fill the container, but respect `min-width` and `max-width`; this is the default behavior |
| flex-start/start/self-start | Items are placed at the start of the cross axis |
| flex-end/end/self-end | Items are placed at the end of the cross axis |
| center | Items are placed on the center of the cross axis |
| baseline | Items are aligned so their baselines align |

> The `safe` and `unsafe` modifiers work here.

### align-content

The functions similar to `align-items`, but only takes effect on multi-line flex containers if `flex-wrap` is set to either `wrap` or `wrap-reverse`.

If `flex-wrap` is set to `nowrap`, then `align-content` will do nothing.

| Values | Description |
| --- | --- |
| normal | Reflects the default position of the items as if no value was set |
| flex-start/start | `flex-start` respects `flex-direction`, `start` respects writing-mode direction |
| flex-end/end | `flex-end` respects `flex-direction`, `start` respects writing-mode direction |
| center | Items are centered with the flex container |
| space-between | Items are evenly distributed, first line at the start of the container and the last line at the end of the container |
| space-around | Items are evenly distributed evenly between each line, and half space at top of first line and bottom of last line |
| space-evenly | Items are evenly distributed with equal spacing around each line |
| stretch| Lines are stretched to take up all remaining space with the flex container |

> The `safe` and `unsafe` modifiers work here.

### gap, row-gap, column-gap

The `gap` property is a shorthand use for combining `row-gap` and `column-gap` into one line for styling.

```css
.flex-container {
  display: flex;
  gap: 10px 20px; /* row-gap column-gap */

  /* Same as
  row-gap: 10px;
  column-gap: 20px; */
}
```

[back to top](#properties)

---

## Children Properties

### order

This will allow for items to be displayed in a given order.

```css
.flex-item-1 {
  order: 5;
}
```

### flex-grow

An item with a grow of greater than 1 will taken up that much space as the container size is increased.

```css
.flex-item-1 {
  flex-grow: 1;
}

.flex-item-2 {
  flex-grow: 2;
}
```

In this, `.flex-item-2` will grow and fill in twice as much space than `.flex-item-1` will.

### flex-shrink

The same for `flex-shrink`, items shrink more if the value is higher than other items.

```css
.flex-item-3 {
  flex-shrink: 1;
}

.flex-item-4 {
  flex-shrink: 2;
}
```

### flex-basis

This defines the default size of an element before the remaining space is distributed.

### flex

This is shorthand for `flex-grow`, `flex-shrink` and `flex-basis`. The second and third parameters are optional.

The default values are: `0 1 auto`.

### align-self

This will work just the same as `align-items`, but only for the child component it is declared.

### justify-self

This will work in a similar fashion to `justify-content` and is for the flex item along.

[back to top](#properties)