CSS Flexbox Generator

What is Flexbox?

Flexbox is a way to layout elements to accommodate different screen sizes. Flexbox does not rely on floats and margins, and the flex container's margins don't collapse with the margins of its contents. Note that some browsers need prefixes to use these features.

The "flex" in flexbox comes from its ability to alter its items' width, height and order to best fill the available space. Flexible items expand and shrink to fill the available space.

Flexbox content begins with a container whose display property is set to flex or inline-flex. Any elements within that container are now automatically flex-items. Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis. For example, if we have the flex-direction set to row, the main axis is horizontal (left to right unless the direction is set rtl) and the cross direction is vertical (top to bottom)

What isn't Flexbox?

The answer to every layout problem. Like any tool, flexbox has its place in your toolbox, but it's not meant to be a cure-all for every layout issue.

Properties Used

• The display property defines how a particular HTML element should be displayed.
• The flex-direction property indicates the direction in which the flex elements are located inside the container.
• The flex-wrap property determines whether the flex container will be single-line or multi-line. If multi-line is enabled in the container, this property also allows you to control the direction in which the flex elements are placed.
• The justify-content property determines how the browser distributes the space between and around the flex elements along the main axis of the container (horizontally), or aligns the entire grid layout along the axis of the grid container row.
• The align-items property aligns all the elements inside the flex container along the transverse axis, or aligns all elements of the grid layout along the axis of the column.
• The align-content property determines how the browser distributes the space between and around the flex elements along the transverse axis of the container (vertically), or aligns the entire grid layout along the axis of the grid container column.
• The flex-grow property indicates how much an element can increase in relation to other flex elements in one container.
• The flex-shrink property determines how the element will be compressed relative to other flex elements in the container (with a lack of free space).
• The flex-basis property defines the default size for the flex element before allocating space in the container.
• The align-self property specifies the alignment of individual row elements inside a flex container, or aligns a grid layout element inside a cell along the column axis of a grid container.
• The order property sets the order of the flex element in the container relative to the rest.

With thanks to catchmyfame for the code.