What I learned from Flexbox Froggy: Container Properties
Tags: beginners, css
Published: 2021-08-03 06:19:13

In the interest of learning Flexbox during bootcamp, I tried my hand at the brilliant [Flexbox Froggy](https://flexboxfroggy.com) challenge. I completed all 24 levels, but in a pattern-matching, brute-force kinda way. By the end, I felt like I had learned nothing.

Today, months later, I decided to try my hand again at [Flexbox Froggy](https://flexboxfroggy.com). Here's what I learned.

##Define your container and set the `display` property to `flex`

```javascript
.myContainer {
  display: flex;
  // everything else goes here
}
```

---

##Define the main axis of (the contents of) your container
Most often, you'll want your items to be ordered from first to last. But should they be laid out from left-to-right, or from top-to-bottom?

####Example: Before

```javascript
#pond {
  display: flex;
  // nothing here yet
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odaauv1kef6k87a2rzxh.png)

---

####Example: After

```javascript
#pond {
  display: flex;
  flex-direction: column;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03d3ko8la38zbsyhrlp1.png)

---

#### Options
* Left-to-right: `flex-direction: row` (if you want it right-to-left, choose `flex-direction: row-reverse`)
* Top-to-bottom: `flex-direction: column` (if you want it bottom-to-top, choose `flex-direction: column-reverse`)

---

##Let your items wrap (or don't)
By default, all your items to be confined to a single row (or a single column, if you chose `flex-direction: column` above). If you want your items to wrap to the next line once they run out of space, choose `flex-direction: wrap`. Lastly, if for some reason you want the wrapping to be reversed, choose `flex-direction: wrap-reverse`


####Example: Before

```javascript
#pond {
  display: flex;
  // nothing here yet
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qro67314hwwtg0c1o4n.png)

---

####Example: After

```javascript
#pond {
  display: flex;
  flex-wrap: wrap;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qwt1bkh47u5kcpt41qy.png)

---

## Horizontally align your items
You're probably already familiar with text layout that is left-aligned, right-aligned, and center-aligned. You can, of course, align your items the same way, using `justify-content`.

####Example: Before

```javascript
#pond {
  display: flex;
  // nothing here yet
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ln527onn7rewqer9y56f.png)

---

####Example: After

```javascript
#pond {
  display: flex;
  justify-content: flex-end;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6z23jod372tou9lbq9r.png)

---

#### Options

* left align: `justify-content: flex-start`
* right align: `justify-content: flex-end`
* center align: `justify-content: center`

---

## Vertically align your items
`justify-content` concerns alignment along the "main axis" (aka the horizontal axis). `align-items` concerns alignment along the "cross axis" (aka the vertical axis).

####Example: Before

```javascript
#pond {
  display: flex;
  // nothing here yet
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcb36iexv4vkiiu4yec1.png)

---

####Example: After

```javascript
#pond {
  display: flex;
  align-items: flex-end
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zsypdxx41tcmrolcsqy.png)

---

#### Options

* `align-items: flex-start`: vertically align items to the top of the container
* `align-items: flex-end`: vertically align items to the bottom of the container
* `align-items: center`: vertically align items to the center of the container
* `align-items: stretch`: vertically stretch items from the top of the container to the bottom of the container
* `align-items: baseline`: vertically center each item to the baseline of the container that text sits upon

---

## Distribute your items
The more interesting settings for `justify-content` are `space-between`, `space-around`, and `space-evenly`:

####Example: Before

```javascript
#pond {
  display: flex;
  // nothing here yet
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuf5115ilazz7f1v39lx.png)

---

####Example: After

```javascript
#pond {
  display: flex;
  justify-content: space-around;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8un2n16izpft7adriojm.png)

---

#### Options

* `justify-content: space-between`: put all the space **between** your items, like x---x---x
* `justify-content: space-around`: surround each item with the same amount of space on either side of that item, like -x--x--x-
* `justify-content: space-evenly`: divide up all the available space before and after each item, like -x-x-x-x-

---

## Distribute your whitespace
Imagine that you have a notebook-sized sheet of lined writing paper. Now, imagine that you only have 3 lines of text to write on that sheet of paper. You could start at the top of the page, which would leave the rest of the page below the text empty. You could put the text at the bottom of the page, leaving the top of the page empty. This is what `align-content` controls.

####Example: Before

```javascript
#pond {
  display: flex;
  flex-wrap: wrap;
  // nothing here yet
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y39fflzj11lrpvok96n4.png)

---

####Example: After

```javascript
#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erhxto91i0fw192pzp51.png)

---

#### Options

* `align-content: flex-start`: rows of items are clustered at the top of the container, leaving whitespace below
* `align-content: flex-end`: rows of items are clustered at the bottom of the container, leaving whitespace above
* `align-content: center`: rows of items are clustered at the center of the page, leaving whitespace above and below
* `align-content: space-between`: items are distributed so that any available whitespace is  between rows of items, but never above the first row of items or below the last row of items.
* `align-content: space-around`: items are distributed so that any available whitespace is  between rows of items, including above the first row of items and below the last row of items.
* `align-content: stretch`: the items are stretched to fill all available space so there is no whitespace above or below a row of items.

Next: What I learned from Flexbox Froggy: Item properties!