CodeGym/Courses/Frontend SELF EN/Cross Axis Alignment

Cross Axis Alignment

Available

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:

CSS
.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;
}
HTML
<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:

CSS
.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;
}
HTML
<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:

CSS
.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;
}
HTML
<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 17lesson 4
Locked
Using align-items
Using align-items
1
Task
Frontend SELF EN,  level 17lesson 4
Locked
Using flex-start and flex-end
Using flex-start and flex-end
Comments
  • Popular
  • New
  • Old
You must be signed in to leave a comment
This page doesn't have any comments yet