Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Flex Item Properties | Flexbox
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

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.

html

index

css

index

js

index

copy

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.

html

index

css

index

js

index

copy

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.

html

index

css

index

js

index

copy
1. What does the `flex-grow` property do?
2. What does the `flex-basis` property do?

What does the flex-grow property do?

Select the correct answer

What does the flex-basis property do?

Select the correct answer

Everything was clear?

Section 4. Chapter 5
We're sorry to hear that something went wrong. What happened?
some-alt