# Flexbox Overview


**The Purpose: **The Flexible Box Layout Module, makes it easier to design a flexible responsive layout structure without using float or positioning. It's a more efficient way to layout, align, and distribute space among items in a container.

```
/* This creates a flex container and all elements inside this 
   container become 'flex items'. */
.flex-container {
	display: flex;
}
``` 


# Terminology
- **Flex container**: refers to the element that has the `display: flex` property applied to it.
- **Flex items**: refers to the elements that are contained *within* a flex-container.
- **Main axis**: By default, the main axis direction goes from left to right. You can change the direction of the main axis with `flex-direction`.
- **Cross axis**: is the opposite of whatever the main axis is. By default, the direction of it goes from top to bottom.

💡 ****The main axis and cross axis will always be perpendicular to one another.****


![Screen Shot 2020-08-09 at 5.55.19 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597010700678/wqybZ2ta6.png)


![Screen Shot 2020-08-09 at 5.56.16 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597010839287/yt5SJcnxx.png)


# Container Properties

1. `flex-direction`
2. `flex-wrap`
3. `justify-content`
4. `align-items`
5. `align-content`


### 1) flex-direction
- Allows us to specify how flex items are placed within a flex container. It defines the main axis and its direction. Default is `flex-direction: row`.
- When `flex-direction: row` is applied, the main axis is ***horizontal***.
- When `flex-direction: column` is applied, the main axis is ***vertical***.
- [Sandbox Examples  🏗️ ](https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-direction&preval=row-reverse)

### 2) flex-wrap
- Allows us to specify if the items in a flex container (flex items) are forced into a single line or can be wrapped into multiple lines. Default is `flex-wrap: nowrap`. This applies to both rows and columns (although columns are less common and look a little wonky.)
- If `flex-wrap` is not defined on a container and you have elements with large widths, the flexbox container will ignore them and make it so that everything fits on a single line. The container will make the items as big as they can without making them wrap.
-  [Sandbox Examples 🏗️](https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-wrap&preval=nowrap) 

### 3) justify-content
- Allows us to specify how the space inside of a flex container should be distributed between the different items along the main axis.
- Default is `justify-content: flex-start`
-  [Sandbox Examples 🏗️](https://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content&preval=flex-start) 

### 4) align-items
- Defines how space is distributed **between items** in flex container ***along the cross axis***. Default is `align-items: stretch`.
- `justify-content` and `align-items` do the same things, just on different axes.
-  [Sandbox Examples 🏗️](https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-items&preval=stretch) 

### 5) align-content
- Defines how space is distributed **between rows** in a flex container ***along the cross axis***. Default is `align-content: stretch`.
- [Sandbox Examples 🏗️](https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-content&preval=stretch)


# Flex-Item Properties

1.  `align-self`
2.  `order`
3. `flex-basis`
4. `flex-shrink`
5. `flex-grow`
6. `flex`

### 1) align-self
- Allows you to override `align-items` on an *individual* flex item. Default is `align-self: auto`.
- It’s very similar to `align-items`. While `align-items` encompasses all flex items in a container, `align-self` grabs an individual flex item and applies the property to that individual item only ***along the cross axis***.
- [Sandbox Examples 🏗️](https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-self&preval=auto)

### 2) order
- Specifies the order used to layout items in their flex container. 
- By default, all items have an order of 0.
- `order` only affects the *visual order* of items and not their logical order. Due to this, it could cause accessibility issues with screen readers since it creates a disconnect between what the user sees and the actual DOM order.

### 3) flex-basis
- Specifies the ideal size of a flex item before it’s placed into a flex-container.
- It’s sort of like width when you are working with rows and height when you’re working with columns.
    - For example, If you were to have a row with a set `width` and `flex-basis`, the `flex-basis` value would get precedence over the `width` since it’s the “ideal size.”
    - [The Difference between width and flex-basis](https://gedd.ski/post/the-difference-between-width-and-flex-basis/)

### 4) flex-shrink
- Dictates how items should shrink when there is not enough space in a container. By default, `flex-shrink: 1` is applied and all items will shrink at the same rate.
- The math for `flex-shrink` is different from `flex-grow`.
- This property can be useful for things like navigation bars where you want things to shrink in a particular way.
- [MDN - flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)

### 5) flex-grow
- Dictates how the ***unused space*** (if any) should be spread amongst flex items. By default, `flex-grow: 0` is applied and all items will grow at the same rate.
- When you assign a number to `flex-grow`, all items will evenly divide the unused space amongst themselves.
- [Article on flex-grow](https://css-tricks.com/flex-grow-is-weird/)

### 6) flex
- Defines how a flex item will grow or shrink to fit the *available space in a container*. It is a shorthand property for `flex-grow`, `flex-shrink`, and `flex-basis`.
    - **Syntax**: `flex: <flex-grow> <flex-shrink> <flex-basis>`
- [MDN - CSS flex Property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)

## References
- [Udemy Course - The Advanced Web Developer Bootcamp](https://www.udemy.com/share/101XvUBEEYdl9TTXQ=/) 
-  [W3Schools - CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp) 
-  [In-depth Tutorial on Flexbox by Colt Steele](https://youtu.be/qZv-rNx0jEA) 

*[Photo by  [Andrew Schultz](https://unsplash.com/@beatthegrind?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)  on  [Unsplash](https://unsplash.com/s/photos/grid?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) ] *