Simple, beginner steps: CSS Flexbox!
Tags: css, react, beginners, webdev
Published: 2022-04-03 14:52:11

## Let's talk through the basics of one of the most versatile modules in CSS -- the flexbox!

The flexbox has two elements: the parent element (the container that's 'flexing') and the child element (the flex items). It's amazingly versatile because it allows us to format, layout and organize even when the size of the space is unknown-- or it's dynamic!

## Parent properties:

**1. display** This is the building block, that is going to define the flex container.

```
.container {
  display: flex;
}
```
**2. flex-direction** This is going to dictate which axis your flexbox parent expands on, and which direction on that axis. 
_row:_ left to right
_row-reverse:_ right to left
_column:_ north to south
_column-reverse:_ south to north

```
.container {
  flex-direction: row (OR) row-reverse (OR) column (OR) column-reverse;
}
```

**3. flex-wrap** Flexbox will always try to fit items into one line-- this property can allow it to wrap to a new line.
_nowrap:_ all on one line
_wrap:_ wrap onto multiple lines (top to bottom)
_wrap-reverse:_ multiple lines (bottom to top)

```
.container {
  flex-wrap: nowrap (OR) wrap (OR) wrap-reverse;
}
```

**4. justify-content** This property defines the alignment on the axis declared originally for the flex. 
_flex-start:_ items are packed toward the start of the flex-direction
_flex-end:_ packed toward end of flex direction
_start:_ packed toward start of writing-mode direction
_end:_ packed toward end of writing-mode direction
_left:_ left packed toward left edge of container
_right:_ left packed toward right edge of container
_center:_ centered
_space-between:_ items are evenly spaced on line
_space-around:_ items are evenly spaced, space around them is also even
_space-evenly:_ spacing between items and edges is even

```
.container {
  justify-content: flex-start (OR) flex-end (OR) center (OR) space-between (OR) space-around (OR) space-evenly (OR) start (OR) end (OR) left (OR) right (OR) you get the idea;
}
```

**5. align-items** This defines how the items are laid out on the crossing axis of the current line.

_stretch:_ (default) stretches to fill container
_flex-start:_ start of the cross axis 
_flex-end:_ end of the cross axis
_center:_ items are centered on cross axis
_baseline:_ items are aligned so their baselines are aligned

_For this one, imagine your flex goes L-->R. Flex-start would mean all items align at the top (North). Flex-end would align them at the bottom (South). Center would center them along the center of North-South, centered by the item's center. Stretch would make them fill equal North-South space from the center. Baseline will center them North-South by baseline._

```
.container {
 align-items: (value here)
}
```

**6. align-content** This aligns the lines of a flex container within the extra space on the cross axis. _This property only effects multi-lines flex containers._

_normal:_ (default)
_flex-start:_ items packed to start of container
_flex-end:_ items packed to end of container
_center:_ items centered in container
_space-between:_ items evenly distributed from start to end of container
_space-around:_ items evenly distributed with equal space around each line
_space-evenly:_ items are evenly distributed with equal space around them
_stretch:_ lines stretch to take up space

```
.container {
  align-content: (value here)
}
```

**7. gaps** The gap property handles the space between flex items. It only applies between items, and doesn't affect edges.

you can declare:
_gap:_ 20px (default)
_gap:_ 20px 20px (row-gap then column-gap)
_row-gap:_ 20px
_column-gap:_ 20px


```
.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px;
  row-gap: 10px;
  column-gap: 20px;
}
```

---

## Child properties:

**1. order** This can control the order items appear in the flex container. If items have the same order, they default to their source order.

```
.item {
  order: 5;
}
```

**2. flex-grow** This defines the flex item's ability to grow if necessary. The value is a proportion. 

_For example, if all items had a value of 1, the space would be distributed equally between the children. If one item had a 2, it would take up twice the allotted space of all other items._

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

**3. flex-shrink** This is the opposite of grow, and allows items to shrink if necessary

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

**3. align-self** This allows the default alignment (the one in align-items in the parent) to be overridden in a specific item

```
.item {
  align-self: auto (OR) flex-start (OR) flex-end (OR) center (OR) baseline (OR) stretch;
}
```

---

It can take awhile to get a hang of the flexbox, but it's worth it!

Check out this amazing visual guide to CSS flexbox [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)!