Flexbox

## [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

[Josh's wonderful interactive Flexbox guide](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/)


Old school: Split up page into 12 columns.
```css
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
```

- Efficiently layout **items in a container** (use Grid for large scale layout), even when their size isn't known (hence, **flex** box).
- **Big idea**: Flex width/height to best fit the space. Expands to fill space or shrinks to prevent overflow.
- Benefits: Simpler markup (no more wrappers, floats, etc), and reduced JS needs
- Direction agnostic (unlike block which is vertical, and inline which is horizontal)
- [Browser support](https://caniuse.com/#search=css%20flexible)
- Bootstrap uses Flexbox behind the scenes
- `container` with `items` - [img](https://css-tricks.com/wp-content/uploads/2018/11/00-basic-terminology.svg)
- Items are laid out following either the `main axis` from `main-start` to `main-end` or via the `cross axis` from `cross-start` to `cross end`. Main is **not** necessarily horizontal. The direction of each is impacted by flex-direction.

**Key Terms**
- main size - A flex item's width/height (whichever is the main dimension).
- cross axis - Perpendicular to main axis
- cross-start | cross-end - Flex lines start at cross-start
- cross-size - Width or height of flex item (whichever is in the cross dimension)

**Properties**

**display**
```css
.container {
display: flex; /* or inline-flex */
}
```

**flex-direction**
row is ltr, column is top to bottom.
```css
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
```

**flex-wrap**
By default, all items will try to fit on one line. So the default is `nowrap`. `wrap` will wrap top to bottom/left. `wrap-reverse` **will reverse the `align-items` setting** and the direction new lines are created. So it will wrap items to the top/right instead of the bottom/left (depending on the `flex-direction`). And note order: Flex wraps **first**, then shrinks/grows. if enabled. Regarding grow/shrink/ the item's current line is the only space that matters.

```css
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
```
[flex-wrap demo](https://css-tricks.com/almanac/properties/f/flex-wrap/)

**flex-flow (applies to parent flex container)**
Shorthand for `flex-direction` and `flex-wrap` which together define the container's main and cross axes. Again, default is `row nowrap`

```css
flex-flow: row wrap;
```

Above is same as:

`flex-direction: row; flex-wrap: wrap;`

**justify-content**
Defines alignment along the main axis. Distributes extra free space. [Image](https://css-tricks.com/wp-content/uploads/2018/10/justify-content.svg)

```css
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
```

**align-items**
Same as justify-content, but defines alignment on the **cross axis**. [Image](https://css-tricks.com/wp-content/uploads/2018/10/align-items.svg). Default: `stretch`.

```css
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
```

**align-content**
This aligns the lines, so only applies when wrapping. Like `justify-content`, but for the `cross-axis`. [Image](https://css-tricks.com/wp-content/uploads/2018/10/align-content.svg)

```css
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
```

#### Properties for flex items

**gap**
gap allows us to create space in-between each Flex child, along the primary axis.

**margin-left** and **margin-right**
Set this to auto to add space around a specific element. It will gobble up the extra space, and apply it to the element's margin. It gives us precise control over where to distribute the extra space.

**order**
By default, flex items are laid out in source order. Can change using `order`:

```css
.item {
order: ; /* default is 0 */
}

```

Any item with an order of 1 or higher gets sent to the back of the line. A negative order moves the item to the front of the line. Items with the same order setting will honor their source order.

**flex-grow**
Let item grow if necessary. Dictactes the amount of the available space in the container the item should take up. If all items have `flex-grow` set to the same value, the remaining space will be distributed equally. If one is set to 2, and others are set to one, it will take up twice as much space.

```css
.item {
flex-grow: ; /* default 0 */
}
```

**flex-shrink**
Opposite of `flex-grow`. Describes how the content should react when there's not enough space. Relative like `flex-grow`. Set to `0` to not allow an item to shrink.

```css
.item {
flex-shrink: ; /* default 1 */
}
```

**flex-basis**
The new and improved version of `width` and `height`, for flex, but only applies to the primary axis. Defines the element's default size before the remaining space is distributed. It's not a guarantee. It merely specifies an an "ideal" when there's enough space. So it's merely a starting point. This setting overrides `width` if set. `min-width` sets a lower limit. `max-width` sets an upper limit. Like `width`, can use `%` or `px`. This effects height instead when in column mode.

Also, when the total space available falls below the total of flex-basis for all elements, shrinking occurs. So `flex-shrink` effects the behavior at that point. And when extra space is available, their `flex-grow` setting effects if and how they grow.

Finally, if you set `flex-basis` lower than `min-width`, it becomes the min value. Same story with `max-width`.

- `auto`: use items width or height property. The default.
- `content`: size it based on item's content

```css
.item {
flex-basis: | auto; /* default auto */
}
```

In general, we can use width and flex-basis interchangeably in a Flex row, but there are some exceptions. For example, the width property affects replaced elements like images differently than flex-basis. Also, width can reduce an item below its minimum size, while flex-basis can't.

**flex**
Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis` combined, in that order. Only first param is required. Default is `0 1 0px`. You can leave off the 2nd param too (since the last one is px or auto, it's not ambiguous. For example, this sets only grow and basis: `flex: 0 300px;`

```css
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
```

Also, handy `auto` shortcut (grow, shrink, and use size as basis):
```css
.item {
flex: auto; /* sets flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
}
```

And handy `none` shortcut (don't grow, don't shrink, and use your size as a basis):
```css
.item {
flex: none; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto */
}
```

**align-self**
Override alignment for a single item. Works like `align-items`.

```css
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
```

It's recommended to use this shorthand property. It sets the other values intelligently.

### Cross-browser support

- There are older versions of Flexbox (used by IE10/11.
- Use [autoprefixer](https://css-tricks.com/autoprefixer/)

### Useful tools / Resources

[flexplorer](https://bennettfeely.com/flexplorer/)
[Box alignment cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) - Compares Flexbox and Grid alignment
[Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/) - Examples of problems solved by Flexbox
[Guide to Flexbox on CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[List of bugs with current status](https://github.com/philipwalton/flexbugs)

### Examples

[2 column responsive layout](https://codepen.io/tutsplus/pen/XJexGg)
[Responsive table on Stackblitz](https://stackblitz.com/edit/mobile-table?file=style.css) (also in this repo)
[Calendar Codepen](https://codepen.io/ljm/pen/JjfAv)
[Full site layout](https://codepen.io/coryhouse/pen/wvwxjxJ) - Compare to [Grid version](https://codepen.io/coryhouse/pen/zYOLjLM)