CSS フレックスボックスレイアウト

フレックスボックスレイアウトの実際

以下の例では、コンテナーに display: flex に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 justify-content の値は、主軸上に均等に配置するため、 space-between に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 align-items の既定値は stretch なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />には追加の<br />テキストが<br />あります</div>
</div>

body {
  font-family: sans-serif;
}

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  justify-content: space-between;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 1em;
}

リファレンス

プロパティ

• align-content
• align-items
• align-self
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• justify-content

用語集の用語

• フレックスボックス
• フレックスコンテナー
• フレックスアイテム
• 主軸
• 交差軸
• Flex

ガイド

フレックスボックスの基本概念

フレックスボックスの機能の概要です。

フレックスボックスと他のレイアウト方法の関係

フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているかです。

フレックスコンテナー内のアイテムの配置

ボックス配置プロパティがどのようにフレックスボックスに働くかです。

フレックスアイテムの順序

アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。

主軸方向のフレックスアイテムの比率の制御

flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。

フレックスアイテムの折り返しをマスターする

複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。

フレックスボックスの典型的な用途

典型的なフレックスボックスの用途の一般的なデザインパターン。

CSS レイアウト: フレックスボックス

フレックスボックスレイアウトを使用してウェブレイアウトを作成する方法を学びます。

フレックスボックスのボックス配置

CSS ボックス配置の詳細機能のうち、フレックスボックスに特有のものです。

関連概念

CSS 表示方法モジュール

• display
• order

CSS ボックス配置モジュール

• align-content
• align-items
• align-self
• column-gap
• gap
• justify-items
• place-content
• place-items
• row-gap

CSS ボックスサイズ指定モジュール

• aspect-ratio
• max-content 値
• min-content 値
• fit-content 値
• 内在サイズ（用語）

仕様書

関連情報

• CSS グリッドレイアウトモジュール
• CSS 書字方向モジュール
• CSS display の複数キーワード構文の使用