たった5つの質問に答えるだけで理想の企業に出会えるかも！？

【新定番】CSSのFlexboxって何？レイアウトや順番、幅の自動調整も出来る

SHARE

目次

  1. Flexboxとは？
  2. Flexbox(親要素)の使い方
    1. flexコンテナーとflexアイテム
    2. flex-directionプロパティ
    3. justify-contentプロパティ
    4. align-itemsプロパティ
    5. flex-wrapプロパティ
    6. flex-grow、flex-shrink、 flex-basisプロパティ
  3. アイテム(子要素)に使用できるプロパティ一覧
    1. orderプロバティ
    2. flex-growプロバティ
    3. flex-shrinkプロバティ
    4. flex-basisプロバティ
  4. flexプロバティ
    1. align-selfプロバティ
  5. Flexboxでのレイアウトの作成
    1. Flexboxでのレスポンシブデザイン
    2. Flexboxでのグリッドレイアウト
    3. レイアウトの自動調整
  6. Flexboxでの配置・配列の調整
  7. Flexboxでのサイズの調整
  8. Flexboxでの自動幅・高さの調整
  9. まとめ

Flexboxとは？

Flexbox (Flexible Box Layout)は、CSSのレイアウトモデルで、要素を柔軟に配置するために使用されます。 Flexboxを使用すると、要素を縦または横に並べることができ、それぞれの要素の大きさや配置を調整することができます。また、要素間のスペースを均等に割り当てることもできます。Flexboxは、スマートフォンやタブレットなどのレスポンシブデザインでよく使用されます。

ブラウザのサポート状況について

flexboxは現在のブラウザーでもサポートされていますが、古いブラウザーに対応するためには、特別なプロパティが必要になることがあります。

Flexbox(親要素)の使い方

Flexboxの要素をまとめるために、flexコンテナーを設定します。それには、親要素にdisplayプロパティを”flex”または”inline-flex”に設定します。

flexコンテナーとflexアイテム

.container {
    display: flex; /* flexコンテナーを設定 */
}

flex-directionプロパティ

Flexboxの要素を縦または横に並べる方向を設定します。

.container {
    display: flex;
    flex-direction: row; /* 横に並べる */
}

justify-contentプロパティ

Flexboxの要素を並べる方法を設定します。

.container {
    display: flex;
    flex-direction: row;
    justify-content: center; /* 要素を中央に寄せる */
}

align-itemsプロパティ

Flexboxの要素を縦に並べる方法を設定します。

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; /* 要素を中央に寄せる */
}

flex-wrapプロパティ

flex-wrapプロパティを使用して、要素の折り返しを設定する
指定する値には、nowrap、wrap、wrap-reverseの3つがあります。

.container {
    display: flex;
    flex-wrap: wrap;
}

上記のように、要素を折り返すには、まずは flexbox を使うために、display: flex;を使用し、その後にflex-wrap:wrap;を使用することで実現できます。

flex-grow、flex-shrink、 flex-basisプロパティ

flex-grow、flex-shrink、flex-basisは、Flexboxレイアウトの中で子要素の大きさを決定するプロパティです。

flex-grow: 子要素が空いているスペースを何分の1で占有するかを指定するプロパティです。デフォルト値は0で、1以上の数値を指定することで、子要素が空いているスペースを占有することができます。


flex-shrink: 子要素が親要素より大きい場合、どれだけ縮小するかを指定するプロパティです。デフォルト値は1で、0以上の数値を指定することで、子要素が縮小することができます。

flex-basis: 子要素の基本的な大きさを指定するプロパティです。指定できる値は、widthやheightなどのサイズ、またはautoを指定することができます。デフォルト値はautoで、子要素の大きさは子要素自体によって決まります。

.item {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 200px;
}

上記のように、子要素の大きさを決定するには、要素に対して flex-grow: 1; flex-shrink: 2; flex-basis: 200px; のように指定することで実現できます。

アイテム(子要素)に使用できるプロパティ一覧

以下は、子要素に使用できるプロパティを述べています。

orderプロバティ

CSS Flexboxのorderプロパティを使用することで、Flexboxの要素の順序を変更することができます。

orderプロパティは、数値を指定することで、Flexboxの要素の順序を変更します。数値が小さいほど、要素は前に配置され、数値が大きいほど、要素は後ろに配置されます。

例えば、以下のようにorderプロパティを使用して、Flexboxの要素の順序を変更することができます。

.item1 {
    order: 1; /* 最初に配置 */
}

.item2 {
    order: 2; /* 2番目に配置 */
}

.item3 {
    order: 3; /* 3番目に配置 */
}

また、負の数も指定することができます。

.item1 {
    order: -1; /* 最後に配置 */
}

.item2 {
    order: 0; /* 通常の順序に配置 */
}

これで、Flexboxの要素の順序を変更することができます。

flex-growプロバティ

CSS Flexboxのflex-growプロパティを使用することで、Flexboxの要素の大きさを自動的に調整することができます。

flex-growプロパティは、数値を指定することで、Flexboxの要素がどの程度大きくなるかを指定します。数値が大きいほど、要素は大きくなります。

例えば、以下のようにflex-growプロパティを使用して、Flexboxの要素の大きさを自動的に調整することができます。

.item1 {
    flex-grow: 1; /* 通常の大きさ */
}

.item2 {
    flex-grow: 2; /* 2倍の大きさ */
}

.item3 {
    flex-grow: 3; /* 3倍の大きさ */
}

これで、Flexboxの要素の大きさを自動的に調整することができます。

ただし、 flex-shrinkプロパティ 、 flex-basisプロパティ も合わせて使用する必要があります。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 20%;
}

これで、Flexboxの要素の大きさが自動的に調整され、要素がwrapされるようになります。

flex-shrinkプロバティ

CSS Flexboxのflex-shrinkプロパティを使用することで、Flexboxの要素を縮小する時にどの程度縮小させるかを指定することができます。

flex-shrinkプロパティは、数値を指定することで、Flexboxの要素が縮小する際の比率を指定します。数値が大きいほど、要素は縮小します。

例えば、以下のようにflex-shrinkプロパティを使用して、Flexboxの要素を縮小する比率を指定することができます。

.item1 {
    flex-shrink: 1; /* 通常の縮小比率 */
}

.item2 {
    flex-shrink: 2; /* 2倍の縮小比率 */
}

.item3 {
    flex-shrink: 3; /* 3倍の縮小比率 */
}

ただし、 flex-growプロパティ 、 flex-basisプロパティ も合わせて使用する必要があります。

.container {
  display: flex;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 20%;
}

これで、flex-basisに指定した基準値から、flex-grow、flex-shrinkに指定した値をもとに要素が縮小する比率が決まります。

また、要素が画面からはみ出してしまうことを防ぐために、min-widthやmin-heightのプロパティを使用することもできます。

flex-basisプロバティ

CSS Flexboxのflex-basisプロパティを使用することで、Flexboxの要素の初期サイズを指定することができます。flex-basisプロパティは、長さの単位（px, em, remなど）またはパーセンテージ値を指定することで、要素の初期サイズを指定します。

例えば、以下のようにflex-basisプロパティを使用して、Flexboxの要素の初期サイズを指定することができます。

.item1 {
    flex-basis: 100px; /* 初期サイズを100pxに指定 */
}

.item2 {
    flex-basis: 50%; /* 初期サイズを50%に指定 */
}

.item3 {
    flex-basis: auto; /* 要素の本来のサイズを初期サイズに指定 */
}

ただし、 flex-growプロパティ 、 flex-shrinkプロパティ も合わせて使用する必要があります。

.container {
  display: flex;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 20%;
}

これで、flex-basisに指定した基準値から、flex-grow、flex-shrinkに指定した値をもとに要素のサイズが変化します。

また、要素の本来のサイズを初期サイズにする場合は、autoを指定することで設定できます。

flexプロバティ

CSS Flexboxのflexプロパティは、要素の大きさを決定するために使用します。次のように、HTML要素に対してCSSで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;
}

.item {
  flex: 1;
}

上記の例では、.container要素に対してdisplay: flexプロパティを設定し、その中にあるすべての.item要素に対してflex: 1プロパティを設定しています。これにより、すべての.item要素がコンテナに対して等しい大きさで配置されます。

align-selfプロバティ

アイテムの垂直方向の位置を指定
CSS Flexboxのalign-selfプロパティは、Flexboxコンテナ内の単独の要素のアラインメントを指定するために使用します。次のように、HTML要素に対してCSSでalign-selfプロパティを設定することで実装できます。

<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;
  align-items: center;
}

.item:nth-child(2) {
  align-self: flex-end;
}

上記の例では、.container要素に対して display: flexプロパティを設定し、 align-itemsプロパティをcenterに設定して、その中にあるすべての.item要素を縦方向に中央寄せにしています。
.item:nth-child(2)に対してalign-self: flex-endプロパティを設定することで、2番目の.item要素だけ縦方向の最後尾に寄せています。

align-selfプロパティには、以下のいくつかの値があります:

プロバティ動き
flex-startアイテムをFlexboxコンテナの上端に寄せます。
flex-endアイテムをFlexboxコンテナの下端に寄せます。
centerアイテムをFlexboxコンテナの縦方向中央に寄せます。
stretch(デフォルト値)アイテムをFlexboxコンテナに合わせて拡大/縮小します。
baseline文字のベースラインに沿ってアイテムを寄せます。

Flexboxでのレイアウトの作成

Flexboxを使用することで、非常に柔軟なレイアウトを作成することができます。次のように、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;
}

これにより、.container要素内にあるすべての.item要素が横に並びます。これはデフォルトの設定です。

Flexboxでのレスポンシブデザイン

CSS Flexboxを使用してレスポンシブデザインを実装する方法は様々です。次のように、CSSのメディアクエリを使用して、画面サイズに応じてFlexboxのレイアウトを調整することができます。

.container {
  display: flex;
}

@media screen and (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }
  .item {
    width: 100%;
  }
}

この例では、画面幅が600px以下の場合、.container要素の flex-wrapプロパティをwrapに設定し、.item要素の幅を100%に設定しています。これにより、画面幅が狭い場合には、.item要素が横に並ぶのではなく、縦に並びます。

Flexboxでのグリッドレイアウト

flex コンテナを作成します。これは、 flex-wrap:wrap と display: flex の CSS プロパティを使用して、親要素に適用します。
.container {
  display: flex;
  flex-wrap: wrap;
}
フレックスアイテムを作成します。これは、 flex-basis を使用して、子要素に適用します。
.item {
  flex-basis: 25%;
}
画面サイズに応じて、 flex-basis の値を変更することで、レスポンシブに対応することができます。
@media (max-width: 600px) {
  .item {
    flex-basis: 50%;
  }
}

これで、グリッドレイアウトが実装されます。

レイアウトの自動調整

flex コンテナを作成します。これは、 display: flex の CSS プロパティを使用して、親要素に適用します。

.container {
  display: flex;
}

flex-grow, flex-shrink, flex-basis などのプロパティを使用して、子要素に適用します。

flex-grow は、子要素が収まりきらない場合に、どの程度拡大するかを指定します。
flex-shrinkは、子要素が大きすぎる場合に、どの程度縮小するかを指定します。
flex-basisは、子要素の基本的なサイズを指定します。

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

align-itemsとjustify-content プロパティを使用することで、子要素の整列を調整することができます。

.container {
  align-items: center;
  justify-content: center;
}

これで、自動調整が実装されます。

Flexboxでの配置・配列の調整

CSS Flexboxでの配置・配列の調整を実装するには、次のようにします。

flex コンテナを作成します。これは、 display: flex の CSS プロパティを使用して、親要素に適用します。
.container {
  display: flex;
}
flex-direction プロパティを使用して、子要素の配列方向を指定します。
  1. row (既定値)：水平方向に配置されます。
  2. row-reverse：水平方向に逆順に配置されます。
  3. column：垂直方向に配置されます。
  4. column-reverse：垂直方向に逆順に配置されます。
.container {
  flex-direction: row;
}
align-items, align-content, justify-content のプロパティを使用して、子要素の配置方法を調整します。
  1. align-itemsは子要素を垂直方向に配置します。
  2. align-contentは、複数行にまたがる場合に、行間の配置を調整します。
  3. justify-contentは子要素を水平方向に配置します。
.container {
  align-items: center;
  align-content: center;
  justify-content: center;
}

これで、配置・配列の調整が実装されます。

Flexboxでのサイズの調整

CSS Flexboxでのサイズの調整を実装するには、次のようにします。

flex コンテナを作成します。これは、 display: flex の CSS プロパティを使用して、親要素に適用します。
.container {
  display: flex;
}
flex-wrap プロパティを使用して、子要素の折り返しの有無を指定します。
  1. nowrap (既定値)：折り返ししない。
  2. wrap：折り返す。
.container {
  flex-wrap: wrap;
}
flex-basis, flex-grow, flex-shrink のプロパティを使用して、子要素のサイズを調整します。
  1. flex-basisは子要素の基本的なサイズを指定します。
  2. flex-growは、子要素が収まりきらない場合に、どの程度拡大するかを指定します。
  3. flex-shrinkは、子要素が大きすぎる場合に、どの程度縮小するかを指定します。
.item {
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 1;
}
min-width,min-height,max-width,max-heightなどのプロパティを使用して、子要素の最小・最大サイズを指定します。
.item {
  min-width: 100px;
  max-width: 300px;
}

これで、サイズの調整が実装されます。

Flexboxでの自動幅・高さの調整

CSS Flexboxでの自動幅・高さの調整を実装するには、次のようにします。
.container {
  display: flex;
}
flex-wrap プロパティを使用して、子要素の折り返しの有無を指定します。
  1. nowrap (既定値)：折り返ししない。
  2. wrap：折り返す。
.container {
  flex-wrap: wrap;
}
flex-basis, flex-grow, flex-shrink のプロパティを使用して、子要素のサイズを調整します。
  1. flex-basisは子要素の基本的なサイズを指定します。
  2. flex-growは、子要素が収まりきらない場合に、どの程度拡大するかを指定します。
  3. flex-shrinkは、子要素が大きすぎる場合に、どの程度縮小するかを指定します。
.item {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
}

これで、子要素のサイズが自動的に調整され、幅・高さが自動的に調整されます。

flexboxについては、以下のリソースを参照してください:
参考Basic concepts of flexbox – CSS: Cascading Style Sheets | MDNnull

まとめ

本記事では、Flexboxによるレイアウトの作成、順番の変更などをご説明しました。
最近は、floatよりも利用頻度が高いので、理解しておいて損はないと考えています。

Flexboxを使用すると、より簡単にレイアウトを作成する事ができます！

ぜひ、自由に思い通りのレイアウトを作ってみてください！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【初心者大歓迎】CSSアニメーションを作ってみよう！

次の記事

【CSS Flexbox】で余白の設定をする方法！【gapとc…