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

book
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.

css
flex-basis: auto | value;

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.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="blog-list">
<li class="blog-item">
<p class="article">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ad
autem cupiditate earum suscipit ab aut hic omnis, fugit qui sed
aspernatur deserunt dolores reprehenderit mollitia inventore labore,
fugiat ratione!
</p>
</li>
<li class="blog-item">
<p class="article">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta
provident voluptatum facere earum, animi debitis at, quod et expedita,
hic magni. Minus delectus praesentium vel officiis nulla ipsa ratione
impedit.
</p>
</li>
<li class="blog-item">
<p class="article">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut
recusandae nobis porro, dignissimos reprehenderit laboriosam et. Magni
quo laudantium pariatur necessitatibus, mollitia in voluptas
consequatur aspernatur! Cupiditate at sed sapiente?
</p>
</li>
</ul>
</body>
</html>

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.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="blog-list">
<li class="blog-item">
<p class="article">Item 1</p>
</li>
<li class="blog-item">
<p class="article">item 2</p>
</li>
<li class="blog-item">
<p class="article">Item 3</p>
</li>
</ul>
</body>
</html>

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.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="blog-list">
<li class="blog-item">
<h4>First item in the html document</h4>
</li>
<li class="blog-item">
<h4>Second item in the html document</h4>
</li>
<li class="blog-item">
<h4>Third item in the html document</h4>
</li>
</ul>
</body>
</html>

1. What does the flex-grow property do?

2. What does the flex-basis property do?

question mark

What does the flex-grow property do?

Select the correct answer

question mark

What does the flex-basis property do?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 5
some-alt