iPentec.com / Doc / CSS / Flexbox

Flexbox の内部枠の縦方向の配置を変更する (内部の枠の縦位置を中央揃え、下端揃えにする) - CSS

Flexbox の内部枠の縦方向の配置を変更するコードを紹介します。

概要

Flexbox を利用して枠を段組みした場合に、枠の縦方向の配置を変更するにはalign-items プロパティを利用します。

縦方向のアライメント

枠の横方向のアライメントを変更する方法については、こちらの記事を参照してください。

書式

align-items: (配置方法);

配置方法には次の値が利用できます。

配置方法
名称	意味
flex-start	上端で揃えます
center	中央で揃えます
flex-end	下端で揃えます
stretch	枠の高さを外側の枠の大きさまで広げます

記述例

align-items:center;

実装例

コード

以下のCSS、HTMLファイルを作成します。

SimpleAlignVertical.css

.Container {
  display: flex;
  border: 1px solid #ff6a00;
  align-items: center;
  height: 240px;
}

.Frame1 {
  flex: 1;
  border: 1px solid #48b2ff;
}

.Frame2 {
  flex: 1;
  border: 1px solid #0094ff;
  margin-left: 1rem;
}

.Frame3 {
  flex: 1;
  border: 1px solid #0059b9;
  margin-left: 1rem;
}

.Frame4 {
  flex: 1;
  border: 1px solid #0040a4;
  margin-left: 1rem;
}

SimpleAlignVertical.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="SimpleAlignVertical.css" />
</head>
<body>
  <div class="Container">
    <div class="Frame1">
      ABCDEFG<br />
      あいうえお
    </div>
    <div class="Frame2">
      ABCDEFG<br />
      あいうえお<br />
      αβγδ<br/>
      ⅠⅡⅢⅣⅤ
    </div>
    <div class="Frame3">
      ABCDEFG
    </div>
    <div class="Frame4">
      ABCDEFG<br />
      あいうえお<br/>
      αβγδ
    </div>
  </div>
</body>
</html>

解説

外側の枠に align-itemsプロパティを記述し内部の枠の整列方法を決定します。
今回ののコードでは center を指定しているため中央揃えになります。また、heightプロパティを記述し高さを設定しています。

.Container {
  display: flex;
  border: 1px solid #ff6a00;
  align-items: center;
  height: 240px;
}

内部の枠はflexプロパティを設定します。両端の枠以外はmargin-left プロパティを設定し枠間の余白を開けています。

.Frame1 {
  flex: 1;
  border: 1px solid #48b2ff;
}

.Frame2 {
  flex: 1;
  border: 1px solid #0094ff;
  margin-left: 1rem;
}

表示結果

上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。枠が縦方向の中央で揃えられて表示されます。

表示結果 (flex-start の場合)

Containerクラスのalign-itemsプロパティを flex-startに設定した場合の表示結果です。

.Container {
  display: flex;
  border: 1px solid #ff6a00;
  align-items: flex-start;
  height: 240px;
}

枠が上端で揃えられて表示されます。

表示結果 (flex-end の場合)

Containerクラスのalign-itemsプロパティを flex-endに設定した場合の表示結果です。

.Container {
  display: flex;
  border: 1px solid #ff6a00;
  align-items: flex-end;
  height: 240px;
}

枠が下端で揃えられて表示されます。

表示結果 (stretch の場合)

Containerクラスのalign-itemsプロパティを stretchに設定した場合の表示結果です。

.Container {
  display: flex;
  border: 1px solid #ff6a00;
  align-items: stretch;
  height: 240px;
}

枠の大きさが外部の枠の高さまで拡大されて表示されます。

補足:表示結果 (align-items プロパティを省略した場合)

Containerクラスのalign-itemsプロパティを省略した場合の表示結果です。

.Container {
  display: flex;
  border: 1px solid #ff6a00;
  height: 240px;
}

align-items プロパティを省略した場合は、stretch を設定した場合と同じ表示になります。

枠が折り返される場合

flex-wrap プロパティが wrap に設定され、枠が折り返される場合の表示を確認します。

コード

下記コードを準備します。

ItemAlignVertical.css

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
  align-items: center;
}

.Frame {
  width:180px;
  border:1px solid #00a1ff;
}

ItemAlignVertical.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="ItemAlignVertical.css" />
</head>
<body>
  <div class="Container">
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
      αβγδ<br/>
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
  </div>
</body>
</html>