Course Content
CSS Fundamentals
CSS Fundamentals
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.
The flex-basis
value can be specified using various units, such as pixels, percentages, ems. Alternatively, it can be set to the keyword auto
, allowing the browser to determine the size of the flex item based on its content.
index
index
index
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.
index
index
index
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.
index
index
index
Everything was clear?