CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSフレックスコンテナのプロパティ一覧と使い方

CSSのFlexboxレイアウトでは、親要素(フレックスコンテナ)に指定できるプロパティを使うことで、子要素(フレックスアイテム)の並び方や配置を柔軟に制御できます。

フレックスコンテナの主なプロパティ

フレックスコンテナに設定できる代表的なプロパティは以下の6つです。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction

フレックスアイテムの並ぶ方向(主軸の方向)を指定します。横並びなら row(初期値)、縦並びなら column を使用します。逆順にしたい場合は row-reverse や column-reverse も使えます。

flex-wrap

アイテムがコンテナの幅や高さを超えた場合に、折り返すかどうかを指定します。折り返さない nowrap(初期値)、折り返す wrap、逆方向に折り返す wrap-reverse の3つの値があります。

flex-flow

flex-direction と flex-wrap をまとめて指定できるショートハンドプロパティです。例えば flex-flow: column wrap; のように記述することで、コードを簡潔にできます。

justify-content

主軸方向(横並びなら水平方向)におけるアイテムの配置方法を指定します。flex-start(初期値)、center、flex-end、space-between、space-around などの値があり、中央寄せや均等配置を簡単に実現できます。

align-items

交差軸方向(横並びなら垂直方向)における各アイテムの揃え方を指定します。stretch(初期値)、flex-start、center、flex-end、baseline などが利用できます。

align-content

複数行に折り返した際の行全体の配置を交差軸方向に指定します。flex-start、center、flex-end、space-between、space-around、stretch(初期値)などの値があります。単一行の場合は効果がない点に注意してください。

まとめ

これらのプロパティを組み合わせることで、従来は複雑だったセンタリングや等間隔配置などのレイアウトを、少ないコードで直感的に実装できます。まずは display: flex; をコンテナに指定し、目的に応じて上記のプロパティを試してみましょう。

  1. CSSのmarginプロパティとは？基本構文から実践的な使い方まで解説

    CSSのmarginプロパティとは CSSのmarginプロパティは、margin-top・margin-right・margin-bottom・margin-leftの4つのプロパティをまとめて指定できるショートハンド（一括指定）プロパティです。要素の外側に余白を設けることで、要素同士の間隔やページ端との距離を自由に調整できます。もちろん、各辺ごとに個別のマージンを設定することも可能です。 値の指定ルール marginプロパティでは、指定する値の数によって適用される方向が変わります。 値が1つ：上下左右すべてに同じ値が適用される 値が2つ：1つ目が「上下」、2つ目が「左右」に適用される

  2. CSS Flexboxで要素をコンテナの下部に配置する方法

    Flexboxで要素を下部に配置する基本の考え方 CSS Flexbox(フレックスボックス)を使えば、positionなどの位置指定プロパティに頼らなくても、要素をコンテナの下部に簡単に配置できます。鍵となるのはmargin-top: auto;という指定です。 フレックスアイテムに自動マージン(autoマージン)を設定すると、コンテナ内の余った空きスペースがすべてそのマージンに吸収されます。その結果、要素は主軸方向の末端へ押し込まれます。flex-direction: column;の場合、これはコンテナの最下部を意味します。 構文 flexプロパティの基本的な構文は次のとおりです。 S