TIL # 6 Flexbox
Tags: css, flexbox
Published: 2023-08-10 03:05:37

Flexbox is another way to position the elements on your homepage. I find it a bit easier to understand than the box model. [Flexbox Froggy](https://flexboxfroggy.com/) is a webpage minigame to help understand the different properties that are available in Flexbox.

To start, we need to understand that flex containers and flex items are 2 separate things. Flex containers will contain flex items, so the direct child elements of flex containers are considered as flex items. To specify a flex container, you must add a CSS declaration of `display: flex` or `display: inline-flex`. There are several properties and their values that we will discuss too, these will include `justify-content`, `align-items`, [`flex-grow`](https://www.codecademy.com/courses/learn-css-flexbox-and-grid/lessons/learn-flexbox/exercises/flex-grow), [`flex-shrink`](https://www.codecademy.com/courses/learn-css-flexbox-and-grid/lessons/learn-flexbox/exercises/flex-shrink), [`flex-basis`](https://www.codecademy.com/courses/learn-css-flexbox-and-grid/lessons/learn-flexbox/exercises/flex-basis), [`flex`](https://www.codecademy.com/courses/learn-css-flexbox-and-grid/lessons/learn-flexbox/exercises/flex), `flex-wrap`, [`align-content`](https://www.codecademy.com/courses/learn-css-flexbox-and-grid/lessons/learn-flexbox/exercises/align-content), [`flex-direction`](https://www.codecademy.com/courses/learn-css-flexbox-and-grid/lessons/learn-flexbox/exercises/flex-direction), and [`flex-flow`](https://www.codecademy.com/courses/learn-css-flexbox-and-grid/lessons/learn-flexbox/exercises/flex-flow). If any of the topics are linked, it means it was challenging to describe it in a post To quickly describe what `display: flex` does, lets imagine 3 squares vertically stacked with the `div` class. If you added `display: flex` in CSS, it would cause those squares to line up horizontally side by side. `display: inline-flex` works pretty similarly, but will leave inline elements as they are instead of turning them into blocks.

`justify-content` consists of 5 values, `flex-start`, `flex-end`, `center`, `space-around`, and `space-between`. Let's imagine 3 boxes, side by side, flushed to the left as their default position. `flex-start` will normally position all 3 boxes flushed to the left, or the start of the line. `flex-end` however will take the 3 boxes and flush them to the right, or the end of the line. `center`, accordingly named, will take the 3 boxes and put them side by side in the center of the page. `space-around` will leave a gap of space between the 3 boxes, as well as 2 gaps at the start and end of a line (space 1 - box 1 - space 2 - box 2 - space 3 - box 3 - space  4). `space-between` will only create 2 larger spaces that separate box 1 from box 2, and box 2 from box 3 (box 1 - space 1 - box 2 - space 2 - box 3), so that box 1 and box 3 are flushed to the start and end, and box 3 assumes the center spot.

[`align-items`](https://www.codecademy.com/courses/learn-css-flexbox-and-grid/lessons/learn-flexbox/exercises/align-items) deals with items inside the container, and also has 5 values, although I'm not as confident at explaining 2 of them so I will leave a link to visually understand it all . This time we will discuss we are reusing `flex-start`, `flex-end`, and `center`, however we are also now including `baseline` and `stretch` (both of which I have a slightly harder time explaining). If we take our 3 identical squares before, placing them side by side and in the center of a container, `flex-start` will place the items flushed at the top of the container and remaining in the middle. `flex-end` will place the items all at the bottom of the container. `center` is straightforward once again, and would place the items floating in the middle of the container.

Very brief, but the `flex` property includes all of `flex-grow`, `flex-shrink`, and `flex-basis` all at the same time, the values just need to be placed in that respective order. 

`flex-wrap` has 3 values, `wrap`, `wrap-reverse`, and `nowrap`. Let's imagine 5 squares numbered 1-5 (in order left to right) aligned in a row. As a page compresses sideways, the squares will squeeze together and reorient themselves. In `wrap`, square 5 will drop down a row, followed by square 4 on its left. In `wrap-reverse`, the entire row except for square 5 drops down a row, then square 4 joins it on square 5's left. In `nowrap` however, the squares will remain in place and won't move despite how smushed the webpage is. 

Unfortunately I couldn't explain everything, but sometimes seeing how it works on your own is better than simply reading an explanation. I hope that this post could be of some use!