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.