🐤

Flexboxの理解と使用頻度が高そうなプロパティ一覧

2024/11/04に公開

CSS

HTML

tech

使用頻度が高そうなFlexboxのプロパティを整理してみました。
この記事は、プログラミング初心者である筆者が、学習の過程でつまずいた経験をもとに備忘録としてまとめたものです。

フレックスボックスとは？

引用文
フレキシブルボックスレイアウトモジュールは、通常フレックスボックスと呼ばれ、一次元のレイアウトモデルとして、またインターフェイス中のアイテム間で余白の分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。（中略）フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは CSS グリッドレイアウトが行と列の二次元を同時に制御するモデルであることと対照的です。

主軸と交差軸

フレックスボックスでレイアウトを組む際、主軸（main axis）と交差軸（cross axis）の理解が必要です。「主軸方向に対して～」など、軸に基づいてレイアウトを制御するプロパティが多いため、各軸の役割をしっかり把握しておくと良い。

フレックスコンテナ（親要素）のプロパティ

フレックスコンテナに設定できる代表的なプロパティ一覧。

1. flex-direction

アイテムの並び方向（主軸方向）を指定。初期値はrow（左から右）で、その他の値を指定することで、異なる方向に並べ替えられる。

row（デフォルト）: 横方向に並ぶ
row-reverse: 横方向の逆順
column: 縦方向に並ぶ
column-reverse: 縦方向の逆順

.flex-container {
  display: flex;
  flex-direction: row; /* 横並びに配置 */
}

2. flex-wrap

アイテムが親要素に収まりきらない場合に折り返しを指定。

nowrap（デフォルト）: 折り返さず1行に並べる
wrap: 必要に応じて折り返す
wrap-reverse: 逆順で折り返す

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
}

3. flex-flow

flex-directionとflex-wrapを一括で指定できるプロパティ。

.flex-container {
  display: flex;
  flex-flow: row wrap; /* 横並びで折り返しを許可 */
}

4. justify-content

主軸に沿ってアイテムをどう配置するかを指定。スペースを活用してアイテムを整えたい場合に使用。

flex-start（デフォルト）: 主軸方向の先頭に揃える
flex-end: 主軸方向の末尾に揃える
center: 主軸方向の中央に揃える
space-between: 両端にアイテムを配置し、間隔を均等に
space-around: 各アイテムの周囲に均等なスペースを確保

.flex-container {
  display: flex;
  justify-content: space-between; /* アイテム間に均等なスペース */
}

5. align-items

交差軸方向に沿ってアイテムをどう配置するかを指定。

flex-start: 交差軸の先頭に揃える
flex-end: 交差軸の末尾に揃える
center: 交差軸の中央に揃える
stretch（デフォルト）: アイテムが交差軸方向に伸びる
baseline: テキストのベースラインに揃える

.flex-container {
  display: flex;
  align-items: center; /* 交差軸方向の中央に配置 */
}

6. align-content

複数行がある場合、交差軸方向に行全体をどう配置するかを指定。

flex-start: 交差軸の先頭に行を詰めて配置
flex-end: 交差軸の末尾に行を詰めて配置
center: 行を中央に寄せて配置
space-between: 各行間のスペースを均等に配置
space-around: 各行の周囲に均等なスペースを配置

.flex-container {
  display: flex;
  align-content: space-around; /* 行間に均等なスペースを配置 */
}

フレックスアイテム（子要素）のプロパティ

フレックスアイテムに設定できるプロパティ一覧。

1. align-self

個々のアイテムに対して、交差軸方向の位置を指定。
align-itemsを上書きして、個別に配置を調整する場合に使用。

flex-start：交差軸の先頭に揃える
flex-end：交差軸の末尾に揃える
center：交差軸の中央に揃える
stretch：親要素の高さに合わせて伸ばす

.item {
  align-self: center; /* 特定のアイテムを中央揃え */
}

2. order

アイテムの表示順を指定。初期値は0で、数値が小さいものほど先に表示される。

.item {
  order: -1; /* このアイテムを先頭に表示 */
}

3. flex-grow

親要素に余白がある場合、アイテムがどの程度そのスペースを使うかを指定。初期値は0で、1にすると空きスペースを均等に使用する。

.item {
  flex-grow: 1; /* 空きスペースを均等に拡大 */
}

4. flex-shrink

アイテムが親要素に収まらない場合、どの程度縮小されるかを指定。初期値は1で、0にすると縮小されない。

.item {
  flex-shrink: 1; /* アイテムが均等に縮小 */
}

5. flex-basis

アイテムの基本サイズを指定。初期値はautoで、特定のサイズを指定する場合に使用。

.item {
  flex-basis: 200px; /* アイテムの初期サイズを200pxに設定 */
}

6. flex

flex-grow、flex-shrink、flex-basisを一括指定するプロパティ。

.item {
  flex: 1 1 200px; /* grow, shrink, basisの順に指定 */
}

まとめ

フレックスボックスは、横並びや中央揃えなどのレイアウトが簡単に実現でき、レスポンシブデザインにも最適なレイアウト方式です。

引き続き学習を継続していきます。気づいたことなどあればコメントいただけると嬉しいです。

参考