An Introduction to Flexbox
Tags: html, css, webdev, beginners
Published: 2021-10-04 16:57:11

## Table of Contents
1. [What is Flexbox](#what-is-flexbox-and-why-we-use-it)
2. [How Flexbox works](#how-flexbox-works)
3. [Example](#example)
4. [Resources](#resources)

## What is Flexbox and why we use it?

`Flexbox` is a CSS3 layout model that provides a much easier and efficient way to arrange items within a container and create highly adaptive designs.
It is most appropriate and used for small-scale applications  and layouts like `navigation menus`, `card layouts` and `web forms`. Usually, when it comes to large-scale and enterprise applications [CSS grid](https://www.w3schools.com/css/css_grid.asp) is used most frequently.

## How Flexbox works?

`Flexbox` is not a css style property but a whole CSS module, that contains it's own properties and operators. Some of these properties are applied on the container (flex container) whereas the others are applied on the children (flex items).

`Flexbox` is an one-dimensional layout system that we can use to create a row or a column axis layout. Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).

In the example bellow, we will discuss how `Flexbox` works, how flex container communicates with flex items and some properties that it uses.


## Example

{% codepen https://codepen.io/zagaris/pen/NWgzRqx %}

⚫ The `display: flex` property sets the container as a flex container, so every item that exists inside it becomes a flex item.

⚫ Now as you can see the flex items are aligned in a row in the main axis. This happens because `flexbox` sets the `flex-direction: row` property to the flex container by default.
The `flex-direction` CSS property specifies how flex items are placed in the flex container defining the main axis and the direction.
We can change the main direction of the items to be the one we want by adding to the `flex-direction` the properly value.

`flex-direction` takes 4 values:
 - row(default): *left to right.*
 - column: *same as row but top to bottom.*
 - row-reverse: *right to left.*
 - column-reverse: *same as row-reverse but bottom to top.*

⚫ The `order` property changes the order of the flex items inside the container.

⚫ The `flex` CSS shorthand property sets how a flex item will grow or shrink to fit the space available within the flex container. This shorthand is setting three separate CSS properties (flex factors) at the same time, these are `flex-grow`, `flex-shrink` and `flex-basis`. The last two properties (flex-shrink and flex-basis) are optional. A flex item is fully inflexible if flex-grow and flex-shrink values are zero and flexible otherwise.

In the example above, `flex: 1` is equivalent to: 
`flex-grow : 1
flex-shrink : 1
flex-basis : 0`

`flex-grow`: *Specifies how much the item will grow relative to the rest of the flexible items.*

`flex-shrink`: *Specifies how much the item will shrink relative to the rest of the flexible items.*

`flex-basis`: *Sets the initial main size of the flex item, before free space is distributed according to the flex factors.*

{% codepen https://codepen.io/zagaris/pen/yLXRdaE %}


⚫ In the flex container we have added the `justify-content: center` property and as you can see the items are aligned to the center.
The `justify-content` CSS property defines and controls the alignment along the main axis of all the items of the flex container.

Some frequently used values `justify-content` takes are:

- flex-start (default): *The flex items are packed toward the start of the flex-direction.*
- flex-end: *The flex items are packed toward the end of the flex-direction.*
- center: *The flex items are packed flush to each other toward the center of the alignment container along the main axis.*
- space-between: *The flex items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same.*
- space-around: *The flex items are evenly distributed within the alignment container along the main axis, with half-size spaces on either end. The spacing between each pair of adjacent items is the same.*
- space-evenly: *The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.*


⚫ In the flex container we have added the `flex-wrap: wrap` property and as you can see when the size of the window changes the flex items are separated to multiple lines.
The `flex-wrap` CSS property sets whether flex items are forced into one line or can be flowed into multiple lines.
By default, flex items try to fit into one line. We can change that and allow the items to wrap as needed with this property.

The `flex-wrap` takes the values:
- nowrap(default): *The flex items are laid out in a single line which may cause the flex container to overflow.*
- wrap: *The flex items break into multiple lines and the direction is defined by flex-direction.*
- wrap-reverse: *Behaves the same as wrap but opposite to direction defined by flex-direction.*



## Resources

* [W3Schools: CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp)
* [MDN: Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox)
* [CSS-Tricks: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)