Flex

flexDirection

Container property.

Defines the main axis of the container (the direction of blocks within the container).

Possible values: row, column, row-reverse, column-reverse

flexBasis: "auto" | number | percent

Default: auto

Block property.

Sets the initial size of the block along the main axis of the container. The axis of the container is defined by the flexDirection property.

The initial size is recommended and can change depending on other properties of the block.

The flexGrow and flexShrink properties can affect the size of the block based on the sizes of the container.

Properties such as minWidth, minHeight, maxWidth, and maxHeight take precedence over flexBasis.

When flexBasis = auto, the initial size of the block depends on its content. The size of the container does not affect the size of the block. If there is not enough space in the container, blocks will occupy excess space outside of it.

A percentage value for flexBasis sets the initial size of the block relative to the size of the container. Blocks are not limited by the size of the container and will occupy excess space outside of it if there is not enough room.

An absolute value for flexBasis sets the initial size of the block in pixels, independent of the sizes of the container. Blocks are not limited by the size of the container and will occupy excess space outside of it if there is not enough room.

Using blocks with different types of flexBasis sizes in one container. This example illustrates how blocks occupy excess space outside of the container.

flexGrow: number

Default: 0

Block property.

The growth factor of the block along the main axis of the container. The axis of the container is defined by the flexDirection property.

It affects the share of free space in the container that the block will receive when growing. The share is calculated as the part specified in the block's flexGrow relative to the total sum of flexGrow of all blocks in the container.

It is important to note that this share is only from the free space in the container, not from the total available space. Free space is what remains after blocks occupy space according to their base sizes. The base size of a block is determined by its content, the flexBasis property, or size properties such as width and height.

Properties such as minWidth, minHeight, maxWidth, and maxHeight take precedence over flexGrow.

Blocks are assigned a zero flexGrow. Such blocks do not grow and occupy space only according to their base sizes. The free space in the container remains unoccupied.

All blocks are assigned the same flexGrow. The blocks grow, distributing the free space proportionally among each other.

Blocks with zero flexGrow do not grow and occupy space according to their base sizes, while a single block with a non-zero flexGrow occupies all the free space. The specific value of flexGrow greater than zero in this case does not matter.

Blocks are assigned different flexGrow values. The blocks grow, distributing the free space according to the shares specified in flexGrow.

Blocks are assigned a zero base size flexBasis. Blocks with a zero base size do not occupy any space, and all the space in the container becomes free space. Therefore, the entire size of the block, not just the growth, is calculated based on the share specified in flexGrow.

When there is not enough space in the container, blocks start to occupy excess space outside of it. Instead, setting the property flexWrap to wrap causes the blocks to move to a new line. In this case, the space that blocks distribute among themselves is the free space within the row.

flexShrink: number

Default: 0

Block property.

The shrinkage factor of the block along the main axis of the container. The axis of the container is defined by the flexDirection property.

This comes into play when the size of all blocks in a single line of the container starts to occupy excess space. The factor affects the share of the excess space that will be deducted from the size of the current block.

The flexShrink property works similarly to flexGrow, except that instead of considering free space in the container, it takes into account the excess space occupied, and instead of growing, the sizes of the blocks decrease by shares of that excess space.

Properties such as minWidth, minHeight, maxWidth, and maxHeight take precedence over flexShrink.

Blocks with zero flexShrink do not reduce their size when there is not enough space in the container. The size of the blocks in this example is determined by their content and occupies excess space outside of the container.

Blocks with the same flexShrink will reduce their size by the same absolute amount.

Blocks with zero flexShrink do not reduce their size, while a single block with a non-zero flexShrink will reduce its size until the excess space is eliminated or its own minimum size is reached. The specific value of flexShrink greater than zero in this case does not matter.

A single block with zero flexShrink will not reduce its size. The two other blocks with non-zero flexShrink will reduce their sizes by shares of the excess space occupied. Shares are calculated based on their flexShrink.

flex: number

Block property.

Sets the behavior of the block's size (growth, shrinkage, and initial size) along the main axis of the container. The axis of the container is defined by the flexDirection property.

This property should be viewed as a shorthand syntax for typical scenarios.

Properties such as minWidth, minHeight, maxWidth, and maxHeight take precedence over flex.

number = 0  — equivalent to flexGrow = 0, flexShrink = 0 and flexBasis = auto.

number > 0  — equivalent to flexGrow = number, flexShrink = 1 and flexBasis = 0%.

number < 0  — equivalent to flexGrow = 0, flexShrink = 1 and flexBasis = auto.

flex = 0 blocks occupy space only according to their base sizes. They neither grow nor shrink. The free space in the container remains unoccupied.

flex > 0 is the simplest way to use flex. The initial size of the block is ignored. The final size of the block is entirely calculated based on the share of flexGrow from the free space in the container.

flex < 0 is a scenario where the block occupies size according to its content only if there is free space available. The minimum size of the block is determined by minWidth or minHeight. The specific value of flex less than zero does not matter.

justifyContent

Container property.

Alignment and distribution of space along the main axis of the container. The axis of the container is defined by the flexDirection property.

This property defines how space is distributed between and around blocks along the main axis of the container. Alignment occurs after lengths and margins are applied.

Possible values: flex-start, flex-end, center, space-between, space-around, space-evenly

alignItems

Container property.

Alignment across the main axis of the container. The axis of the container is defined by the flexDirection property.

Possible values: flex-start, flex-end, center, baseline, stretch

alignContent

Container property.

Distribution of space across the main axis of the container. The axis of the container is defined by the flexDirection property.

This property only takes effect within containers with the flexWrap property set to wrap or flexWrap set to wrap-reverse. For containers with the default flexWrap value of no-wrap, the alignContent property does not work.

Possible values: flex-start, flex-end, center, stretch, space-between, space-around

alignSelf

Block property.

Alignment of a specific block across the main axis of the container. The axis of the container is defined by the flexDirection property.

Allows you to set specific alignment for a particular block, overriding the container's alignItems property.

Possible values: auto, flex-start, flex-end, center, baseline, stretch

flexWrap

Default: nowrap

Container property.

Wrapping blocks onto a new line along the main axis of the container. The axis of the container is defined by the flexDirection property.

Blocks try to fit into one line and by default, when there is not enough free space, they start to occupy excess space outside of the container. Setting the flexWrap property to wrap or wrap-reverse changes this behavior, causing blocks to move to a new line instead of occupying excess space.

Possible values: nowrap, wrap, wrap-reverse