Flex Box display: flex; makes it easy to distribute elements within a containing element, — either as a row or as a column. Flex box aligns both the elements and the space within a parent container. This happens even when the parent ’ or children’s size are unknown or dynamic. The child items’ width, height, and order can be set to best fill the space that they take up.  

Flexbox is good at taking a bunch of different sized things, and returning the most readable layout for those things. It avoids squishing a big thing into a small column, and leaving big gaps round a small thing. If you want to control the size of your columns precisely, use Grid.

Flex box Terminology

Flexbox Container (parent)

Controls to set the flexbox container. For quick reference use the Illustrated Flexbox Cheat Sheet.

Display

Initiate the parent as flex container. The container can be a block display: flex;or inline display: inline-flex .

Only the direct children of the parent flex container are effected.

Flex Direction

The flex container has a main axis, either horizontal or vertical, the primary direction along with flex items are laid out.

Use flex-direction: horizontal; or flex-direction: horizontal-reverse; to specify the main direction as horizontal, from left to right or right to left.

Use flex-direction: vertical; or flex-direction: vertical-reverse; to specify the main direction as vertical, from left to right or right to left.

The numbers in the demo reverse when the direction is reversed.

Justify Content

Content is justified by setting the justify-content: property to the following values: flex-start, center, flex-end, space-between and space-around.

The values space between collapses the padding between the flex container and the first and last item while space-around adds some padding.

Flex Box Demo

Using Margin: Auto

Using margin: auto creates automatic space that allows for useful relationships, like in a menu along the main axis, where some menu items are on the left, and others are on the left. Insert a margin: auto and the content splits to the end of the main axis leading a gap in the middle.

Activate the demo by removing the /* from the CSS rule below that targets the third column of the demo above and witness the power of margin: auto to push children around in the flex box parent. Change the target to the second or first columns to see the content rearrange.

Flex-Wrap

Flex does not automatically wrap its children into multiple lines within the container. If there are too many flex-items, they will extend beyond the flex container’s boundary. Wrapping the flex items will wrap them into multiple lines below (or above with wrap-reverse). The demonstration below uses the setting from the previous demo.

Cross Axis Flex Item Align

The cross axis is perpendicular to the main axis. Flex items can be aligned at the start, center or end, or can span the axis.

Flexbox Item (children)

The flexbox items (children) are all the elements that are direct children of the flexbox container, and they can be controlled independently from the flexbox container controls. It is possible to align, order, and determine the proportional size of any of the flex items. This has been made into a separate module that also works for CSS Grid item control.

Order

The display order of the flex items follows the order in which the HTML is written. That can be changed by specifying how many items forward or backward the flex item is to move.

Align

Align flex item can be applied to any element. Here the third flex-item is flex-end , where the others are flex-start . Put them all on stretch, and you have the perfect equally long shaded columns. That is the aim of the Holy Grail Layout below.

Proportion

Width of the boxes can be determined proportionally and is specified for each flex-item by the flexproperty.

Flex Grow, Shrink, and Basis

Rather than specify a fixed ratio between the flex elements, the proportion can be given parameters by the Flex Layout Algorithm and the fit is dynamically determined. This is because the default is flex-shrink: 1, meaning that each element will shrink such that all elements fit in the parent. Change the default value to 0 and all the magic of flexbox disappears, as the flex items will grow beyond the parent. Flexbox is set up to automatically fit the content within the parent. The fit of the flex-items to the remaining space, or lack of space is determined against a reference basis width using grow, shrink and basis controls.

Grow

The Flex layout Algorithm defines the ability for a flex item to grow, starting from the basis number, if the content requires it (when the parent’s width expands). It calculates the proportion for each flex item inside the flex container. Flex growth is the amount a flex item can grow in proportion to the other flex items. If all items have flex-grow set to 1, every child will have an equal potential to expand if their content requires it. If one of the children has a value of 2, that child would take up twice the growth as the others.

Shrink

Flex-shrink does the opposite, with a higher number defining how much greater the shrinkage of an item (when the parent’s width shrinks). In the following example, watch what happens when you cut the width of the parent flex box by 50%. The box with the highest flex-shrink number shrinks the most.

Basis

Flex-basis is the starting or default size of an element before the remaining space (shrink or expand) is distributed. The default is auto. Any value for width or height properties are accepted. If using 0 use units to avoid being interpreted as a flexibility.

settings

The flex property may use up to three values.

If there is only one value a number without units is interpreted as flex-grow or with a unit as flex-basis. You can also use the keywords none, auto or initial.

If there are two values the first value must be a number without units and is flex-grow. If the second number is without units it is flex-shrink or if it has units it is flex-basis.

If there are three values the first is flex-grow, the second is flex-shrink, both without units, and the third has units and is the flex-basis or the value auto.

In auto the item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. Auto is flex: 1 1 auto.

Initial is the default value. The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. Initial is flex: 0 1 auto.

In none the item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. None is flex: 0 0 auto.

By default flex items don’t shrink below their minimum content size. To change this, set the item’s min-width or min-height.

The demo evaluates the content and proportions the boxes automatically according to content shrink from 50% and grow to 150%. Flex box item number, the red box, will expand and shrink more than the others.

Page Layout Demonstration

Once upon a time, a very long time ago, there was a Holy Grail Layout with a three column body, a header and footer. This was accomplished without tables. This was long before mobile changed everything so the layout was not even responsive. How the times have changed. A responsive Holly Grail, so when the viewport shrinks the columns stack.