Do you  even [Flexbox] bro?
Tags: flexbox, css, beginners
Published: 2020-06-07 18:01:20

# <br>I. DEFINITION

The first step in the implementation of the **flex layout** is to define the **display** type to **flex** inside the parent element.

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

#  <br>II. PARENT PROPERTIES

Here is a list of parent properties that can be use with the flexbox layout.

#### **1. [[JUSTIFY-CONTENT](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)]**

Align flex **items** along the **X axis**.

> **flex-start:** Items align to the left side of the container.
> **flex-end:** Items align to the right side of the container.
> **center:** Items align at the center of the container.
> **space-between:** Items display with equal spacing between them.
> **space-around:** Items display with equal spacing around them.

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


#### <br> **2. [[ALIGN-ITEMS](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)]**

Align flex **items** along the **Y axis**.

> **flex-start:** Items align to the top of the container.
> **flex-end:** Items align to the bottom of the container.
> **center:** Items align at the vertical center of the container.
> **baseline:** Items display at the baseline of the container.
> **stretch:** Items are stretched to fit the container.

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

#### <br> **3. [[FLEX-DIRECTION](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)]**

Define the direction of the **main axis**.

> **row:** Items are placed the same as the text direction.
> **row-reverse:** Items are placed opposite to the text direction.
> **column:** Items are placed top to bottom.
> **column-reverse:** Items are placed bottom to top.

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

#### <br> **4. [[FLEX-WRAP](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)]**

Specify whether flex **items** are forced on a single line or can be wrapped on multiple lines.

> **nowrap:** Every item is fit to a single line.
> **wrap:** Items wrap around to additional lines.
> **wrap-reverse:** Items wrap around to additional lines in reverse.

```css
.container {
  display: flex;
  flex-wrap: no-wrap | wrap | wrap-reverse;
}
```

#### <br> **5. [[FLEX-FLOW](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow)]**

**Shorthand** property for **flex-direction** and **flex-wrap**.

```css
.container {
  display: flex;
  flex-flow: [row | row-reverse | column | column-reverse]  [no-wrap | wrap | wrap-reverse]
}
```

## <br> EXTRA PARENT PROPERTY

A little bonus property that the parent can hold.

#### **6. [[ALIGN-CONTENT](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)]**

Determines the **spacing between lines**, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

> **flex-start:** Lines are packed at the top of the container.
> **flex-end:** Lines are packed at the bottom of the container.
> **center:** Lines are packed at the vertical center of the container.
> **space-between:** Lines display with equal spacing between them.
> **space-around:** Lines display with equal spacing around them.
> **stretch:** Lines are stretched to fit the container.

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

#  <br> III. CHILDREN PROPERTIES

#### <br> **1. [[ALIGN-SELF](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)]**

Align the **specified item** along the **X axis**.

> **flex-start:** Items align to the top of the container.
> **flex-end:** Items align to the bottom of the container.
> **center:** Items align at the vertical center of the container.
> **baseline:** Items display at the baseline of the container.
> **stretch:** Items are stretched to fit the container.

```css
.container {
  display: flex;
}
.item {
  align-self: flex-start | flex-end | center | baseline | stretch;
}
```

#### <br> **2. [[ORDER](https://developer.mozilla.org/en-US/docs/Web/CSS/order)]**

Specify the **order** of the **specified** flex **item**.

> **...** Default position -n number.
> **-1:** Default position -1.
> **0:** Default position.
> **+1:** Default position +1.
> **...** Default position +n number.

```css
.container {
  display: flex;
}
.item {
  order: ..., -1, 0, 1, ...;
}
```

#### <br> **3. [[FLEX-GROW](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow)]**

**Expand items** without determining the width if the child.

> **1:**: Default value.
> **2:**: Width grows 2x times.
> **...**: Width grows nx times.

```css
.container {
  display: flex;
}
.item {
  flex-grow: 2;
}
```

#### <br> **4. [[FLEX-SHRINK](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)]**

Allow an item to **shrink** if the **flex container is too small**.

> **1:** Default value.
> **2:**: Item shrinks 2x times.
> **...**: Item shrinks nx times.

```css
.container {
  display: flex;
}
.item {
  flex-shrink: 2;
}
```

#### <br> **5. [[FLEX-BASIS](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)]**

Set the initial size of the flex item before **shrinking** or **growing** it.

> **10px:** Initial size of the flex item.

```css
.container {
  display: flex;
}
.item {
  flex-basis: 10px;
}
```

## <br> EXTRA CHILDREN PROPERTY

There is a **simplified property** for the last three properties mentioned before, hope you enjoy the extra tip.

#### **6. [[FLEX](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)]**

**Flex shorthand** that controls the **flex-grown**, **flex-shrink** and **flex-basis** in one line. Used to control the fill rate of the extra space.

> **1:** Item grows 1x times.
> **0:** Item shrinks 0x times.
> **10px:** Initial size of the flex item.

```css
.container {
  display: flex;
}
.item {
  flex: 1 0 10px;
}
```

# <br> Resources

> [Flexbox Froggy](https://flexboxfroggy.com/) - Learn while playing!
> [freeCodeCamp](https://www.freecodecamp.org/) - Initiation to web development.