Child Elements (Items) #
The direct child elements of a flex container automatically becomes flexible (flex) items.
The element above represents four blue flex items inside a grey flex container.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div> The first flex item in the code does not have to appear as the first item in the layout.
The order value must be a number, default value 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 flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
The value must be a number, default value is 0.
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 flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.
The value must be a number, default value is 1.
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 flex-basis property specifies the initial length of a flex item.
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> <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 align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container’s align-items property.
In these examples we use a 200 pixels high container, to better demonstrate the align-self property:
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 |
