Flex Wrap

By default children are scaled down to fit into a box. By changing the wrapping mode, children are automatically aligned based on the setting. The following examples use boxes A-E are 300px in width and a minimum width of 150px, but they can grow and shrink.

Flex Direction

Layouts can be based on Rows or Columns for all child boxes. This means that all children are placed within a row or within a column. The Flex Direction defines the main axis and defines the direction of all children placed underneath the flexbox container.

Direction

The direction property defines the main axis. Your children can be aligned starting from the left or from the right side. By default it inherits the setting of the parent flex container.

In Column mode this is being flipped and the main axis is going top to down or reverse.

Flex Basis

The basis value defines the default size of a container along the main axis before any growing or shrink is performed. It can be either auto or a given value. This value is like setting the width if flex direction row is used or height or column layout is in use.

Growing and Shrinking

Defines if and how strong a container can grow or shrink to fit into a parent container. The minimum and maximum width/height values are taken into account. If growing is enabled for all child containers, the remaining space is distributed equally to all children.

The value is used as a proportional factor. For example if one container has a shrink value of 2, it shrinks twice as much as all other containers (see below).

Aspect Ratio

Defines how a flexbox is being scaled. If it is on auto, the width and height taken as it is. If a value is used, it defines the ratio between width and height. For example: An aspect of 2.0 means the width is twice the value of the height.

Width, Height and Limits

The sizes for width, height, minimum width and height as well as the maximum width and height can be set to be either auto, in percentage values or in pixel sizes.

• Auto: The size for the box is being calculated automatically based on grow and shrink values, the content as well as the aspect ratio.

• Pixels: Defines the width/height in pixels.

  Note: This dimension can be influenced by other properties.

• Percentage: Same as pixels, but based on percentage values.

The minimum and maximum values size set the upper and lower size constraints of a container. These properties have higher priority than all other properties and are always respected.

Margins, Padding and Borders

Each container can have some offsets by adding either a margin, padding or border.

• Margin: Adds an offset to the outside of the element. It offsets itself and all children from the calculated position. It adds to the total size for the element. it can be set to auto, pixels or percentage values. Negative numbers are allowed too.

• Padding: Affects the size of the container it is applied to. It does not add to the total size of an element if it has an explicit size set. It can be set in pixels or percentage, but can not be negative.

• Border: Does more or less the same as padding. It can only be set in pixels. The main purpose of having an additional border is to keep compatibility with the original flexbox implementation.

Positioning

Justify Content

This setting describes how child containers align along the Main Axis. This can be used to automatically center items for example. The samples below show five child containers with a width of 10% and a height of 100%. The following settings are available:

Align Items

This setting describes how child containers align along the cross axis. It sets the default alignment for all child containers, however it can be overwritten by a children using the Align-Self property. The samples below show five child container with a width of 10% and a height of 25%, 30%, 35%, 40% and 45%, Justify content is set to space around. The following settings are available:

Align Self

Align self is used to overwrite the Align Items property given by the parent container to is own. In the example below, the parent container is set to be Align Items: Start, but container E has an Align-Self set to be Flex-End. This takes it out of the computed position of the top (parent is set to Flex Start) and overwrite it with its own property Flex-End:

Align Content

Defines how containers are aligned, if the wrap mode forces elements to be distributed in more than on row or column. It has no effect if no wrapping happens.

The following settings are available: