CSSの指定で「display:flexがよく分からない」「フレックスボックスのプロパティを覚えられない」

そんな悩みはありませんか？

CSSのflexは、新しく出たばかりで手を出しにくいと考えている方もいるかもしれませんね。

今回は、CSSのdisplay:flexでフレックスボックスを作成したいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのdisplay:flexを使ったフレックスボックス作成ができるようになりますよ。

ぜひ最後まで読んでくださいね！

flex（フレックスボックス）とは？

display:flexと指定することで、フレックスボックスを作ることができます。

フレックスボックスを使うと、これまでfloatやtableを使っていた横並びのレイアウトが簡単に指定できるようになります。

一度覚えてしまえば、様々な形式の並びに対応できるので、とても便利な手法です。

具体的には、以下のように記述します。

<div class="flex-container">
  <div class="flex-item">アイテム1</div>
  <div class="flex-item">アイテム2</div>
  <div class="flex-item">アイテム3</div>
</div>

.flex-container {
  display: flex;
}
.flex-item {
  border: 3px solid #ccc;
}

フレックスボックスを構成する親要素をFlexコンテナ、子要素をFlexアイテムといいます。

上記コードでは、子要素のFlexアイテムが横並びになりましたね。見やすいように枠線をつけています。

Flexコンテナの方に、display:flexを指定します。

これから学習するプロパティを加えることで、様々な横並びを作成できます。

また、フレックスボックスは、ほとんどのブラウザの最新バージョンで対応しています。

対応していないバージョンを考慮して、ベンダープレフィックス（-webkit-）をつけた方が良い場合もあります。

こちらも頭の片隅に入れておきましょう。

Flexコンテナに使えるプロパティ

フレックスボックスの親要素であるFlexコンテナに使用するプロパティを紹介します。

flex-direction

flex-directionは、Flexアイテムを並べる方向や順序などを指定するプロパティです。

値は以下の4つです。

rowとrow-reverseでは、Flexアイテムが横並びに配置されます。

初期値であるrowは左から右に、row-reverseは逆順に変わり右から左に並びます。

columnとcolumn-reverseは上下に並んで配置されます。

columnは上から下に、column-reverseは下から上に並びます。

.flex-container {
    display: flex;
    flex-direction: row-reverse;
}

上記コードでは、要素が右から順に並びますね。

値をcolumnにしてみて、並びがどう変化するのか確認してみてください。

flex-wrap

flex-wrapは、Flexアイテムの改行を許可するかどうかを指定するプロパティです。

値は以下の3つです。

初期値のnowrapは改行をしません。

nowrapの状態で全アイテムを足した横幅の方が大きい場合には、コンテナからはみ出て表示されます。

これにwrapを指定することで、Flexアイテムの横幅をすべて足し合わせたものより、Flexコンテナの幅の方が小さい場合には、要素が次の行に折り返しをするようになります。

wrap-reverseもwrapと同様に改行させますが、順番が逆になります。

flex-flow

flex-flowを使うことで、flex-directionとflex-wrapをまとめて指定することができます。

.flex-container {
  display: flex;
  flex-flow: row wrap-reverse;
}

justify-content

justify-contentは、主軸の方向に対してFlexアイテムをどのように配置するか指定するプロパティです。

主に以下の値を使います。

flex-startは、軸に対してFlexアイテムを先頭に寄せます。flex-endは末尾に寄せます。

centerは、中央に寄せて表示されます。

space-betweenとspace-aroundは間隔を開けて均等に並べる指定です。

space-betweenは、両端のアイテムの外側に間隔はなく、space-aroundは、両端の外側には半分のサイズの間隔をあけます。

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height:200px;
  border: 2px solid #ccc;
}

上記コードでは、アイテムは上から下に並び、先頭と末尾の上と下には間隔はない状態になります。

わかりやすいように高さと枠線を設けています。

align-items

align-itemsは、主軸と垂直の方向に対して、アイテムがどのように配置されるか指定するプロパティです。

主に以下の値を使います。

stretchは、Flexコンテナに合わせてFlexアイテムが垂直方向に引き延ばされ、隙間がなくなります。

flex-startは垂直方向の先頭に寄せて配置され、flex-endは末尾に寄せて配置されます。

centerは中央に配置され、baselineはFlexアイテム内のテキストの下部で揃えられます。

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 350px;
  height: 200px;
  border: 3px solid #ccc;
}

先ほどのFlexアイテムが上下に並んだコンテナにalign-items:flex-endをつけてみました。

「flex-direction:column」の場合、Flexアイテムは縦に並ぶので、align-itemsはその垂直の横方向に働きます。

このときのflex-endでは、Flexアイテムは右側に寄せて並びます。

align-content

align-contentは、Flexアイテムが複数行あった場合の主軸と垂直方向の配置を指定します。

主に以下の値を使います。

stretchは、Flexコンテナに合わせてFlexアイテムが垂直方向に引き延ばされ、間隔がなくなります。

flex-startとflex-endは、align-itemsと同様に先頭と末尾に寄せて配置されます。

centerは中央に寄せて配置されますね。

space-betweenとspace-aroundは、justify-contentと同様に最初のアイテムと最後のアイテムの垂直方向の間隔が変わります。

.flex-container {
  display: flex;
  flex-wrap: warp;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
}

Flexアイテムの改行を認めるために、flex-wrap:warpを指定する必要があります。

上記では、改行したアイテムが中央に寄せて配置されますね。

Flexアイテムに使えるプロパティ

Flexアイテムに使えるプロパティを紹介します。

個々のFlexアイテムに別の指定をすることもできます。

order

orderは、Flexアイテムを並べる順番を指定するプロパティです。

orderの初期値は0であり、マイナスの数値を指定することで1番目に配置することができます。

単純に、1番目にしたいアイテムに1、2番目のものに2、3番目のものに3、というように順番を指定することも可能です。

<div class="flex-container">
  <div class="flex-item1">アイテム1</div>
  <div class="flex-item2">アイテム2</div>
  <div class="flex-item3">アイテム3</div>
</div>

.flex-container {
  display: flex;
}
.flex-item2 {
  order: -1;
}

上記では、2つ目のアイテムが1番目に配置されます。

flex-grow

flex-growは、Flexアイテムを他の要素と比較した伸長率を指定するプロパティです。

初期値は0となります。

<div class="flex-container">
  <div class="flex-item1">アイテム1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3番目</div>
</div>

.flex-container {
  display: flex;
}
.flex-item{
  border: 2px solid #ccc;
}
.flex-item1 {
  flex-grow: 1;
}
.flex-item2 {
  flex-grow: 2;
}

flex-growは、アイテム同士の比率を決めるわけではなく、flex-grow:0の場合に余るスペースを配分する割合を指定しています。

アイテムの中の文字数により元々のサイズが異なる際には、flex-growに大きい数値を指定していても小さい数値の方が要素のサイズが大きくなる場合があります。

flex-shrink

flex-shrinkは、Flexアイテムの縮小率を指定します。

初期値は1となります。Flexアイテムのサイズをすべて足し合わせたものがFlexコンテナよりも大きい際に、flex-shrinkの値に応じて縮小し、コンテナの中に収まります。

flex-basis

Flexアイテムのサイズを指定します。

初期値はautoとなり、flex-basisとwidthの両方が指定されている際には、flex-basisが優先されます。

flex

flexを使うことで、flex-grow、flex-shrink、flex-basisの3つをまとめて指定することができます。

.flex-item {
  flex: 1 2 100px;
}

単位がない数値を2つ記述する際には、flex-grow、flex-shrinkの順になります。

align-self

align-selfは、align-itemsの指定を上書きして、Flexアイテムを配置する位置を指定します。

<div class="flex-container">
  <div class="flex-item1">アイテム1</div>
  <div class="flex-item2">アイテム2</div>
  <div class="flex-item3">アイテム3</div>
</div>

.flex-container {
  display: flex;
  height:300px;
  align-items: flex-end;
}
.flex-item2 {
  align-self: center;
}

上記コードでは、Flexアイテムが末尾に寄せて配置されますが、2番目のアイテムのみ指定が上書きされ中央に配置されます。

まとめ：FlexコンテナとFlexアイテムのプロパティを覚えよう

今回は、CSSのdisplay:flexを使ってフレックスボックスを作成する方法について解説してきました。

フレックスボックスには、FlexコンテナとFlexアイテムがあり、それぞれに指定できるプロパティが異なるという話でしたね。

特にFlexコンテナの方のプロパティはよく使うので、きちんと覚えておきましょう。

今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／