ホーム

align-items with flex

align-items with flex

概要

align-items プロパティは、フレックスコンテナ内のアイテムを垂直方向に配置するために使用されます。このプロパティを使用することで、アイテムを上寄せ、中央寄せ、下寄せ、または基準線に揃えることができます。

それぞれの取りうる値とその例（CSS）

flex-start: アイテムをコンテナの上端に揃えます。

align-items: flex-start;

flex-end: アイテムをコンテナの下端に揃えます。

align-items: flex-end;

center: アイテムをコンテナの中央に揃えます。

align-items: center;

baseline: アイテムを基準線に揃えます。

align-items: baseline;

tretch: アイテムをコンテナの高さに合わせて引き伸ばします。

align-items: stretch;

例

異なる高さのアイテムがアイテムの最大高さより大きな flex コンテナに入っている際に、アイテムの高さ方向の並びを

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Align Items Example</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        height: 300px; /* コンテナの高さ */
        border: 1px solid #000;
        padding: 10px;
      }
      .item1 {
        background-color: #f0f0f0;
        padding: 10px;
        border: 1px solid #ccc;
        width: 100px;
        height: 50px; /* アイテム1の高さ */
        margin: 5px;
      }
      .item2 {
        background-color: #d0d0d0;
        padding: 10px;
        border: 1px solid #ccc;
        width: 100px;
        height: 100px; /* アイテム2の高さ */
        margin: 5px;
      }
      .item3 {
        background-color: #b0b0b0;
        padding: 10px;
        border: 1px solid #ccc;
        width: 100px;
        height: 150px; /* アイテム3の高さ */
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item1">Item 1</div>
      <div class="item2">Item 2</div>
      <div class="item3">Item 3</div>
    </div>
  </body>
</html>

注意点

コンテナの高さを設定してください。