---
title: CSS Flex Items
description: "## Child Elements (Items) The direct child elements of a flex container automatically becomes flexible (flex) items.   1 2 3 4 The element above represents four blue flex items inside a grey flex container. ` 1 2 3 4…"
url: "https://apprentice.mn/docs/css-flex-items/"
updated: "2021-05-13"
category: CSS
---

# CSS Flex Items

## Child Elements (Items)

The direct child elements of a flex container automatically becomes flexible (flex) items.

                   1 2 3 4

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 flex item properties are:

- `order`
- `flex-grow`
- `flex-shrink`
- `flex-basis`
- `flex`
- `align-self`

---

  

##  

## The order Property

The `order` property specifies the order of the flex items.

               1 2 3 4

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.

               1 2 3

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.

       1 2 3 4 5 6 7 8 9 10

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.

               1 2 3 4

### 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` property is a shorthand property for the `flex-grow`, `flex-shrink`, and `flex-basis` properties.

### 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 `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.

       1 2 3 4

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 |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-items%2F&linkname=CSS%20Flex%20Items](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-items%2F&linkname=CSS%20Flex%20Items)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-items%2F&linkname=CSS%20Flex%20Items](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-items%2F&linkname=CSS%20Flex%20Items)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-items%2F&linkname=CSS%20Flex%20Items](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-flex-items%2F&linkname=CSS%20Flex%20Items)[https://www.addtoany.com/share](https://www.addtoany.com/share)