CSS Flex Items
Child Elements (Items)
A flex container’s direct child components instantly become flexible (flex) items.
Four blue flex items are shown in a grey flex container in the element above.
Example
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The flex item properties are:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
The order Property
The flex items’ order is specified by the order property.
It’s not necessary for the first flex item in the code to be the first item in the layout.
Order values are required to be numbers; the default is 0.
Example
The order property can change the order of the flex items:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
The flex-grow Property
The amount that a flex item will grow in relation to the other flex items is specified by the flex-grow property.
The value, which is always zero, must be a number.
Example
Make the third flex item grow eight times faster than the other flex items:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
The flex-shrink Property
The amount that a flex item will shrink with relation to the other flex items is indicated by the flex-shrink property.
The value, which is initially set to 1, must be a number.
Example
Do not let the third flex item shrink as much as the other flex items:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
The flex-basis Property
The starting length of a flex item is specified by the flex-basis property.
Example
Set the initial length of the third flex item to 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
The flex Property
The flex-grow, flex-shrink, and flex-basis attributes can all be summed up as the flex property.
Example
Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
The align-self Property
The alignment of the chosen item inside the flexible container is specified by the align-self attribute.
The container’s align-items property sets the default alignment, which is overridden by the align-self property.
To better illustrate the align-self property, we utilize a 200 pixel height container in following examples:
Example
Align the third flex item in the middle of the container:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Example
Align the second flex item at the top of the container, and the third flex item at the bottom of the container:
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
The CSS Flexbox Items Properties
The following table lists all the CSS Flexbox Items properties:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |
