align-self-

bootstrap5.css

.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

bootstrap5.css

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

bootstrap5.css

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

bootstrap5.css

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

bootstrap5.css

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

bootstrap5.css

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}

html bootstrap5 Sample

カラム単位での垂直方向整列：align-self-*

align-self-start

align-self-center

align-self-end

  <div class="row">
    <!-- 垂直上寄せ -->
    <div class="col align-self-start">align-self-start</div>
    <!-- 垂直中央寄せ -->
    <div class="col align-self-center">align-self-center</div>
    <!-- 垂直下寄せ -->
    <div class="col align-self-end">align-self-end</div>
  </div>

flexコンテナー内のアイテムの配置/自身ストレッチ：align-self-stretch

flex文字01

flex文字02（align-self-stretch）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-stretch">flex文字02（align-self-stretch）</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/自身上：align-self-start

flex文字01

flex文字02（align-self-start）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-start">flex文字02（align-self-start）</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/自身下：align-self-end

flex文字01

flex文字02（align-self-end）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-end">flex文字02（align-self-end）</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/自身中央：align-self-center

flex文字01

flex文字02（align-self-center）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-center">flex文字02（align-self-center）</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/自身ベースライン：align-self-baseline

flex文字01

flex文字02（align-self-baseline）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-baseline">flex文字02（align-self-baseline）</div>
    <div>flex文字03 </div>
  </div>

メディアオブジェクト上部に画像を配置：align-self-start

タイトル

ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります

  <div class="media">
    <!-- アイキャッチなどに利用 -->
    <img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
    </div>
  </div>