Flexboxによる下揃え解説

Flexbox で要素を下揃えする

Flexbox は、レイアウトを柔軟に制御できる CSS のモジュールです。このモジュールを使用して、要素を下揃えすることができます。

基本的な手順

1. コンテナ要素に flexbox を適用する
   

   .container {
       display: flex;
   }
   

2. アイテム要素に align-items プロパティを設定する
   

   .item {
       align-items: flex-end;
   }
   

詳細解説

• align-items: flex-end
  フレックスアイテムをフレックスコンテナの底辺に揃えます。
• display: flex
  コンテンツをフレックスアイテムとして配置し、フレックスボックスのレイアウトを作成します。

具体的な例

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

.container {
  display: flex;
  height: 200p   x; /* コンテンツの高さを指定 */
  border: 1px solid black;
}

.item {
  flex: 1; /* アイテムを均等に伸縮させる */
  align-items: flex-end;
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

このコードでは、コンテナ要素がフレックスボックスになり、アイテム要素が下揃えされます。さらに、アイテム要素が均等に伸縮し、中央揃えされます。

他の align-items 値

• stretch
  フレックスアイテムの高さをフレックスコンテナの高さと一致させます。
• baseline
  フレックスアイテムのベースラインを揃えます。
• center
  フレックスアイテムをフレックスコンテナの中央に揃えます。

Flexbox による下揃え解説

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

.container {
  display: flex;
  height: 200px; /* コンテンツの高さを指定 */
  border: 1px solid black;
}

.item {
  flex: 1; /* アイテムを均等に伸縮させる */
  align-items: flex-end;
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

コード解説

• .item
  フレックスボックスのアイテム要素です。
  • flex: 1 は、アイテムを均等に伸縮させるためのプロパティです。
  • text-align: center は、アイテム内のテキストを中央揃えします。
  • padding: 20px は、アイテムの内部にパディングを適用します。
  • background-color: #f0f0f0 は、アイテムの背景色を設定します。
• .container
  フレックスボックスのコンテナ要素です。
  • display: flex を設定することで、フレックスボックスレイアウトを作成します。
  • height: 200px は、コンテナの高さを指定しています。
  • border: 1px solid black は、コンテナにボーダーを適用しています。

絶対位置付け

.item {
  position: absolute;
  bottom: 0;
  left: 0; /* または right: 0; */
  width: 100%; /* または適切な幅 */
}

• left: 0 または right: 0: 要素をコンテナの左端または右端に配置します。
• bottom: 0
  要素をコンテナの底辺に配置します。
• position: absolute
  要素を絶対位置付けします。

テーブルレイアウト

<table>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table>

table {
  width: 100%;
}

td {
  vertical-align: bottom;
}

• vertical-align: bottom
  テーブルセルの内容を下揃えします。

グリッドレイアウト

.container {
  display: grid;
  grid-template-rows: 1fr; /* 1行のグリッド */
  align-items: end;
}

• grid-template-rows: 1fr
  1行のグリッドを作成します。
• display: grid
  要素をグリッドレイアウトに配置します。

CSS Transform

.item {
  transform: translateY(100%); /* 100% 下に移動 */
}

• transform: translateY(100%)
  要素を垂直方向に 100% 移動させます。