Cross Axis Alignment

8.1 The align-items Property

The align-items and align-self properties let you align flex items along the cross axis, providing flexibility and precision in layout.

The align-items property controls the alignment of flex items along the cross axis (perpendicular to the main axis) within a flex container. The cross axis depends on the value of the flex-direction property:

• If flex-direction is row or row-reverse, then the cross axis is vertical
• If flex-direction is column or column-reverse, then the cross axis is horizontal

Values:

• stretch: items stretch to fill the container (default value)
• flex-start: items align to the start of the container
• flex-end: items align to the end of the container
• center: items align at the center of the container
• baseline: items align to the baseline of the text

Usage Example:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .align-stretch {
        align-items: stretch;
      }

      .align-flex-start {
        align-items: flex-start;
      }
    
  

    
      <div class="container align-stretch">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
      </div>

      <div class="container align-flex-start">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
      </div>
    
  

8.2 The align-self Property

The align-self property allows you to override the align-items value for a specific flex item. This property is applied directly to the flex item and controls its alignment along the cross axis within a flex container.

Values:

• auto: inherits the value from the parent (default)
• stretch: the item stretches to fill the container
• flex-start: the item aligns to the start of the container
• flex-end: the item aligns to the end of the container
• center: the item aligns at the center of the container
• baseline: the item aligns to the baseline of the text

Usage Example:

    
      .container {
        display: flex;
        height: 200px;
        border: 2px solid #000;
        padding: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .self-flex-end {
        align-self: flex-end;
      }

      .self-center {
        align-self: center;
      }

      .self-baseline {
        align-self: baseline;
      }
    
  

    
      <div class="container">
        <div class="item self-flex-end">Item 3</div>
        <div class="item self-center">Item 4</div>
        <div class="item self-baseline">Item 5</div>
      </div>
    
  

Code Explanation:

• .self-flex-end: this item aligns to the bottom of the container
• .self-center: this item aligns vertically centered
• .self-baseline: this item aligns to the text's baseline

8.3 Centering Items

Flexbox makes it easy to center items both vertically and horizontally using a combination of justify-content and align-items or align-self.

Usage Example:

    
      .center-container {
        display: flex;
        justify-content: center; /* horizontal centering */
        align-items: center; /* vertical centering */
        height: 300px;
        border: 2px solid #000;
      }

      .center-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
      }
    
  

    
      <div class="center-container">
        <div class="center-item">Centered item</div>
      </div>
    
  

Code Explanation:

• .center-container: A flex container where items are centered horizontally using justify-content: center; and vertically using align-items: center;
• .center-item: A flex item that is centered within the container

1

Task

Frontend SELF EN, level 17, lesson 4

Locked

Using align-items

Using align-items

Open

1

Task

Frontend SELF EN, level 17, lesson 4

Locked

Using flex-start and flex-end

Using flex-start and flex-end

Open