Flex Items

CSS flex items specify the child elements of a flex container.It has following properties: order, flex-grow, flex-shrink, flex-basis, flex, & align-self.

In other word, the child elements of a flex container are known as flex items. An individual flex item has the followings properties: order, flex-grow, flex-shrink, flex-basis, flex, align-self.

The Order Property

The order property of the flex items is used to set the order in which they appear in the parent container. The default order is 0.

Source Code

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

Try it now

The flex-grow Property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

Flex-grow 0 means width of flex item as per content only.

Flex-grow 1 means the width of the flex item will be distributed equally to all items.

General Syntax

      flex-grow: {0 to n};

Try it now

Source Code

          <div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 2">2</div>
  <div style="flex-grow: 4">3</div>
</div>

Try it now

Flex Basis Property

The flex-basis property specifies the width of the flex item. The default value of the flex-basis is auto. Flex item width can be specified in %age, px, em, or rem.

General Syntax

      flex-basis: {0 to n }px/%/rem/em;

Try it now

Source Code

          <div class="flex-container">
    <div class="flex-item bg-info">1</div>
    <div class="flex-item bg-primary" >2</div>
    <div class="flex-item bg-warning" style="flex-basis: 250px">3</div>
</div>

Try it now

Source Code: Output

1
2
3

The flex Property

It is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

General Syntax

      flex: {flex-grow}  {flex-shrink}  {flex-basis};

Try it now

Source Code

          <div class="flex-container">
    <div class="flex-item" >1</div>
     <div class="flex-item" style="flex: 0 0 200px">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
</div>

Try it now

Source Code: Output

The align-self Property

The align-self property is used to align the selected flex item inside the flexible container.

align-self:center

The align-self:center property is used to align the flex item in the middle of the container.Please keep in mind that flex item alignment can be done with respect to the flex container.

General Syntax

      align-self: center

Try it now

Source Code

          <div class="flex-container">
    <div class="flex-item bg-info" >1</div>
     <div class="flex-item bg-primary" style="align-self: center">2</div>
     <div class="flex-item bg-warning">3</div>
     <div class="flex-item bg-info">4</div>
  </div>

Try it now

align-self: flex-start

The align-self: flex-start property is used to align the flex item at the top of the container.

General Syntax

      align-self: flex-start;

Try it now

Source Code

          <div class="flex-container">
  <div class="flex-item bg-info" >1</div>
  <div class="flex-item bg-primary" style="align-self: flex-start">2</div>
  <div class="flex-item bg-warning">3</div>CSS 
</div>

Try it now

align-self: flex-end

The align-self: flex-end property is used to align the flex item at the end of the container.

General Syntax

      align-self: flex-end;

Try it now

Source Code

          <div class="flex-container">
  <div class="flex-item bg-info" >1 </div>
  <div class="flex-item bg-primary" style="align-self: flex-end">2 </div>
  <div class="flex-item bg-warning">3</div>
</div>

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4