# CSS Flex(ible) Box

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. Flexbox is a way to arrange items into rows or columns. These items will flex (i.e. grow or shrink) based on some simple rules that you can define.


## Flex Containers and Flex Items

Well, flexbox is not just a single CSS property but a whole toolbox of properties that you can use to put things where you need them. A flex container is any element that has **display: flex** on it. A flex item is any element that lives directly inside of a flex container.
You can create and nest multiple flex containers and items ie. put display: flex on a flex item and then use flexbox to arrange its children.

Also you can use the **flex-wrap** property to specify whether the flex items should wrap or not.


## Growing And Shrinking

**flex-grow** expects a single number as its value, and that number is used as the flex-item’s “growth factor”. When every div inside our container has a value of *1*, every div ends up the exact same size. If instead just one of the divs gets value of *2*, then that div would grow to 2x the size of the others.

**flex-shrink** sets the “shrink factor” of a flex item. flex-shrink only ends up being applied if the size of all flex items is larger than their parent container.
The default shrink factor is flex-shrink: 1, which means all items shrink evenly. If you do not want an item to shrink then you can specify flex-shrink: 0. You can specify higher numbers to make certain items shrink at a higher rate than normal.

An important implication to notice here is that when you specify flex-grow or flex-shrink, flex items do not necessarily respect your given values for width, they *grow* or *shrink* to fill the parent container.

**flex-basis** simply sets the initial size of a flex item, so any sort of flex-growing or flex-shrinking starts from that baseline size.
The actual default value for flex-basis is auto, but when you specify flex: 1 on an element, it interprets that as flex: 1 1 0. If you want to only adjust an item’s flex-grow you can simply do so directly, without the shorthand, or you can be more verbose and use the full 3 value shorthand flex: 1 1 auto.


## Axes

The default direction for a flex container is horizontal / row, but can changed to vertical / column. The direction can be specified in CSS like so:  *{ flex-direction: column; }*
Block-level elements default to the full width of their parent. Changing things to vertical using **flex-direction: column** adds complexity because block-level elements default to the height of their content, and collapse if there is no content.


## Alignment

**justify-content** aligns items across the main axis without changing their size. To change the placement of items along the cross axis use **align-items**.
Setting *gap* on a flex container simply adds a specified space between flex items, very similar to adding a margin to the items themselves.