Flex Item Properties

Flex items are children for the flex container. They are not inline or block-level elements anymore. So, we can change item properties to get the correct positioning.

flex-basis

The flex-basis property defines the initial size of a flex item before any remaining space is distributed. It specifies the ideal size of a flex item, which may be adjusted depending on the available space and other properties of the flex container.

You can define the size using pixels, percentages, or ems to specify the ideal size or set it to auto, which allows the browser to determine the size based on the item's content.

flex-grow

The flex-grow property determines the ability of a flex item to grow in relation to other items within a flex container when there is surplus space available.

The flex-grow property accepts a unitless value that signifies the relative size of the flex item compared to other items. To illustrate, if one item has a flex-grow value of 2, and another has a value of 1, the first item will grow twice as much as the second item when there is surplus space in the flex container.

order

The order property is used to define the display order of flex items within their container. By default, flex items are displayed in the order they appear in the HTML document. However, we can modify this order using the order property.

The order value can be any number. Even if we have only 3 elements, assigning order: 1000; to the second element doesn't mean we will have 1000 elements. It simply means that the second element will be placed in the last position. Additionally, if some elements share the same order value, the browser will position them in the order they appear in the HTML document. Let's rearrange the order of items in the following list. The task is to place the third item in the first position.