CSS Flex Items
Flex Items are the direct child elements of a Flex Container.
When a parent element uses display: flex;, its direct children automatically become Flex Items.
CSS provides several properties that allow us to control the size, position, order, and flexibility of individual Flex Items.
What is a Flex Item?
A Flex Item is a direct child of a Flex Container.
For example, if a div contains three child div elements and the parent has display: flex;, those three child elements become Flex Items.
Flex Item properties are normally applied to the individual child elements rather than the parent container.
Basic Structure
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
}Flex Container and Flex Items
Parent = Flex Container | Children = Flex Items
Important Flex Item Properties
| Property | Purpose |
|---|---|
| order | Changes the visual order of individual Flex Items. |
| flex-grow | Controls how an item grows when extra space is available. |
| flex-shrink | Controls how an item shrinks when space is limited. |
| flex-basis | Defines the initial size of a Flex Item. |
| flex | Shorthand for flex-grow, flex-shrink, and flex-basis. |
| align-self | Overrides align-items for an individual Flex Item. |
Styling an Individual Flex Item
Flex Item properties are applied directly to the child element that needs special behavior.
.container {
display: flex;
}
.item {
flex-grow: 1;
}Here, .container is the Flex Container.
The .item elements are Flex Items.
The flex-grow property controls how an individual Flex Item uses available space.
Flex Item with flex-grow
The flex-grow property allows a Flex Item to take a proportional amount of available space.
.container {
display: flex;
}
.item {
flex-grow: 1;
}Output
Different Flex Grow Values
Different Flex Items can have different flex-grow values.
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 1;
}The second item has a grow value of 2, while the first and third items have a value of 1.
Therefore, the second item receives twice as much of the available extra space as each of the other items, subject to the Flexbox sizing rules.
Flex Item with flex-basis
The flex-basis property defines the initial size of a Flex Item along the main axis before remaining space is distributed.
.item {
flex-basis: 200px;
}A basis of 200px tells the Flexbox layout to start the item at a main-axis size of 200px before growth or shrinking is considered.
Flex Item with flex-shrink
The flex-shrink property controls how much a Flex Item can shrink when the container does not have enough space.
.item {
flex-shrink: 1;
}The default value of flex-shrink is generally 1.
An item with a larger shrink value can take a larger share of the required shrinking, subject to the Flexbox sizing rules.
Flex Shorthand Property
The flex property is a shorthand for three Flex Item properties: flex-grow, flex-shrink, and flex-basis.
.item {
flex: 1 1 200px;
}The first value 1 represents flex-grow.
The second value 1 represents flex-shrink.
The third value 200px represents flex-basis.
align-self
The align-self property allows one Flex Item to have a different cross-axis alignment from the other items.
.container {
display: flex;
align-items: center;
}
.item-special {
align-self: flex-end;
}The parent container aligns all items using align-items: center;.
The special item overrides that alignment using align-self: flex-end;.
Example 🌍🤓
Suppose CIIT Training Institute displays several technology cards in a Flexbox layout.
.courses {
display: flex;
gap: 20px;
}
.course {
flex: 1;
}Each course card becomes a Flex Item because it is a direct child of the Flex Container.
The flex: 1; declaration allows the cards to share the available space.
Main Flex Item Properties
order
Changes the visual position of an individual Flex Item.
flex-grow
Controls how an item uses available extra space.
flex-shrink
Controls how an item shrinks when space is limited.
flex-basis
Defines the initial main-axis size of an item.
flex
Shorthand for grow, shrink, and basis.
align-self
Allows one Flex Item to override the container's align-items value.
Summary
Flex Items are the direct children of a Flex Container. Individual Flex Items can be controlled using properties such as order, flex-grow, flex-shrink, flex-basis, flex, and align-self. These properties provide detailed control over the size, position, and behavior of individual items.