【CSS】display: flexの使い方。【総まとめ】

現在CSSの勉強中なんだけどフレックスボックスについての知識が分かりやすくどこかにまとまってないかな？

この記事はこの様な方を想定読者として書いています。

HTMLとCSSの基礎的な知識が備わっている方向けなので、もし自信がない方はまず、下記の記事をお読み下さい。HTML,CSSについてまとめてあります。

僕は三年前にプログラミングの独学を開始して、今では個人でお仕事を取ってきて、実務をこなせるまでに成長しました。そんな僕が、CSSのフレックスボックスについて丁寧に解説しますので、ぜひ最後までお読み下さい。

また、下の動画でも「フレックスボックス」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

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

フレックスボックスとは、CSSでdisplayプロパティの値をflexと指定することによって行うレイアウト方式のことを指します。

まずは簡単に図を使ってどんなレイアウト方式なのかをお伝えします。

上の図の様に、フレックスコンテナに当たる要素にdisplya:flexと指定します。そして、その中に配置された要素がフレックスアイテムと呼ばれ、横並びにレイアウトすることができます。

※フレックスコンテナ直下の要素が横並びになりますが、孫要素までは影響しません。

フレックスボックスというレイアウト方式は、とても柔軟性が高く使いやすいので、レスポンシブデザインの際も大活躍します。

僕もよくフレックスボックスを使いますので、皆さんも使ってみて下さい。

また、CSSフレックスボックスレイアウト (CSS Flexible Box Layout)と呼ばれることもあります。

では詳しい使い方について書いています。

フレックスボックスにおける基本的な知識　主軸と交差軸

まず基本的な知識からお伝えします。

フレックスボックスを使ってレイアウトを組む場合は、主軸方向と交差軸方向をしっかり認識しておく必要があります。なぜなら、この後で紹介する細かい指定は、「主軸方向に対して～」というように、二つの軸を使って指定するからです。

display:flexと指定することでフレックスボックスが利用可能で、それと同時に「主軸方向」と「交差軸方向」が決定します。

その方向は、「初期値」は図のように、左からの右への方向が「主軸方向」となり、上から下の方向が「交差軸方向」となります。この方向はプロパティを設定することでCSSから変更することができます。

どんな順番で要素が並ぶか？

フレックスアイテム(子要素)は、上の図のように「主軸方向に沿って」並んでいきます。

フレックスコンテナ(親要素)に設定できるプロパティ。

フレックスコンテナ(親要素)に設定できるプロパティを紹介します。

まず、箇条書きで紹介します。

では、図を使って、それらのプロパティの使い方について、詳しく丁寧に解説しますね。

flex-direction:

主軸方向は、「flex-direction」というプロパティによって設定できます。
初期値は「row」で、左から右への方向です。

フレックスボックスを使ってレイアウトを組む時は、「どこにいま主軸方向が向いているのか？」を常に意識するといいでしょう。

div {
    flex-direction: row;
}

※「flex-direction」はフレックスアイテムの親要素であるフレックスコンテナに設定することに注意して下さい。

div {
    flex-direction: row-reverse;
}

このように、「flex-direction」の値を「row-reverse」とすると、主軸方向が「右からの左への方向」に設定できます。

div {
    flex-direction: column;
}

このように、「flex-direction」の値を「column」とすることで、主軸方向が上から下、となります。

div {
    flex-direction: column-reverse;
}

このように、「flex-direction」の値を「column-reverse」とすることで、主軸方向が下から上、となります。

flex-wrap:

div {
    flex-wrap: nowrap;
}

「flex-wrap」というプロパティに「wrap」とCSSで指定すると、要素が交差軸方向に折り返すようになります。

初期値は、「nowrap」であるため、交差軸方向に折り返してくれません。

初期値の「nowrap」のままだと親要素にスペースがない場合は、それぞれの要素が縮んで、一列に収まります。縮小率も設定できるので、それについては後述します。

div {
    flex-wrap: wrap-reverse;
}

「flex-wrap」に「wrap-reverse」を指定すると、折り返しかつ交差軸方向を反対に設定できます。

今まで、出てきた4つの主軸方向に対して、全て交差軸方向を反対にすると、合計8つのパターンができるということですね。

flex-flow:

先に紹介した「flex-direction」と「flex-wrap」を一括指定することができるプロパティがあります。

「flex-flow」を使うと、主軸方向の向きと折り返しの動作を同時に指定できます。

div {
    flex-flow: row wrap;
}

このように、指定することで、「flex-direction」には「row」を指定し、「flex-wrap」には「wrap」を指定することが可能です。

justify-content:

「justify-content」はCSSのプロパティの一つです。フレックスコンテナ内のフレックスアイテムをどう配置するか指定できます。

もっと詳しく書くと、「justify-content」は、主軸方向にスペースがある場合、「フレックスアイテムと主軸方向の余白をどう配置するのか」を指定することが可能です。

では、「justify-content」に設定できる値を、全てのブラウザで対応されいるかつ、よく使う値に絞って紹介します。これだけ知っていれば問題なくどんなレイアウトも組むことができるかと思います。

div {
    display: flex;
    justify-content: flex-start;
}

「justify-content」の値に「flex-start」を指定することで、フレックスコンテナの中で主軸方向のスタート側にフレックスアイテムを詰めて配置することが可能です。

div {
    display: flex;
    justify-content: flex-end;
}

「justify-content」の値に「flex-end」を指定することで、フレックスコンテナの中で主軸方向のエンド側にフレックスアイテムを寄せて配置することが可能です。

div {
    display: flex;
    justify-content: center;
}

「justify-content」の値に「center」を指定することで、フレックスコンテナの中で中心にフレックスアイテムを詰めて配置することが可能です。

div {
    display: flex;
    justify-content: space-between;
}

「justify-content」の値に「space-between」を指定することで、フレックスコンテナの中で、フレックスアイテム間に余白を均等にとって配置することが可能です。

div {
    display: flex;
    justify-content: space-around;
}

「justify-content」の値に「space-around」を指定することで、フレックスコンテナの中で、フレックスアイテムの両サイドに均等に余白をとって配置することが可能です。

図にも書きましたが、要素の左右に均等に余白がそれぞれつくので、要素が隣り合わせの箇所が、端の余白に比べて、実質2倍の余白になる、ということですね。

align-items:

「align-items」はCSSのプロパティの一つで、直接の子要素である全てのフレックスアイテムの「align-self」の値を設定します。後から個別に、フレックスアイテムの方で、「align-self」を設定することで上書き可能です。

そして「align-items」では、「同じ行」に並ぶフレックスアイテムの交差軸方向の配置の指定ができます。

全てではありませんが、上記の値が設定できます。全てのブラウザで対応しているものかつ、よく使うものを紹介しました。

それでは、個別に詳しく解説していきますね。

div {
    display: flex;
    align-items: flex-start;
}

「align-items」を「flex-start」に設定すると、フレックスコンテナ内で、図のようにフレックスアイテムを交差軸方向のスタート側に詰めて配置することができます。

div {
    display: flex;
    align-items: flex-end;
}

「align-items」を「flex-end」に設定すると、フレックスコンテナ内で、図のようにフレックスアイテムを交差軸方向のエンド側に詰めて配置することができます。

フレックスコンテナ内で交差軸方向の中の行の中央に寄せてフレックスアイテムをが配置される。

div {
    display: flex;
    align-items: stretch;
}

「align-items」を「stretch」に設定すると、フレックスコンテナ内で、図のようにフレックスアイテムの高さを行の高さまで引き伸ばして配置することができます。

align-content:

「align-content」に値を設定することで、「フレックスアイテムの行」と余白をどう配置するかを指定することができます。

行の中の要素の配置は「align-items」でしたが、「align-content」を使うことで、行をどう配置するかを指定できるということですね。

これが全てではありませんが、上記の値が設定できます。全てのブラウザで対応しているものかつ、よく使うものを紹介しました。これだけ使いこなせれば、正直問題ありません。

それでは、個別に詳しく解説していきますね。

div {
    display: flex;
    align-content: flex-start;
}

行を交差軸方向のスタート側に詰めて配置できます。

div {
    display: flex;
    align-content: flex-end;
}

図のように、フレックスアイテムの行自体を交差軸方向のエンド側(終点)に詰めて配置します。

div {
    display: flex;
    align-content: center;
}

「align-content」の値を「space-between」に指定することで、フレックスコンテナの中央に、フレックスコンテナの行を寄せて配置できます。

上の図を見ると分かりやすいかと思います。

div {
    display: flex;
    align-content: space-between;
}

「align-content」の値を「center」に指定することで、フレックスコンテナを交差軸方向に余白がある場合、その余白が均等になるようにフレックスアイテムを配置できます。

図のような感じですね。

div {
    display: flex;
    align-content: space-around;
}

「align-content」の値を「space-around」に指定することで、フレックスコンテナを交差軸方向に余白がある場合、要素の両側に均等な余白が追加されるようにフレックスアイテムを配置できます。

つまり、要素と要素の間の余白は、フレックスコンテナの中のもっとも外側の余白の2倍となります。

フレックスアイテム(子要素)に設定できるプロパティ。

フレックスアイテムに設定できるプロパティも紹介します。

これだけ知っていれば、問題なくどんなレイアウトも組めるようになるかと思います。

まず箇条書きすると下記の通りです。

それでは詳しく解説していきます。

align-self:

「align-self」フレックスアイテムに設定することができるCSSのプロパティです。

個別の要素を交差軸方向にどう配置するか指定できます。

などがあります。

それでは、それぞれについて図を使って丁寧に詳しく解説します。

div {
    align-self: flex-start; 
}

「align-self」に「flex-start」と設定すると、「その行の中」で交差軸方向のスタート側に要素を詰めて配置することができます。

div {
    align-self: flex-end; 
}

「align-self」に「flex-end」と設定すると、「その行の中」で交差軸方向のエンド側に要素を詰めて配置することができます。

div {
    align-self: center; 
}

「align-self」に「center」と設定すると、「その行の中」で交差軸方向の中央に要素を寄せて配置することができます。

div {
    align-self: stretch; 
}

「align-self」に「stretch」と設定すると、「その行の中」で交差軸方向の高さに要素を伸ばして配置することができます。

※ですが、フレックスアイテムにheightが設定されている時は要素が伸びないので注意が必要です。

order:

「order」プロパティを設定することで、順番を自由に入れ替えることができます。

「order」の初期値は「0」です。

なので、「-1」と設定することで１番先頭にもってくることができますね。

flex-basis:

「flex-basis」を設定することで、その要素の幅を指定できます。

初期値は「auto」です。

autoの時は、widthが設定されていればその値で、されていなければコンテンツの幅となります。

widthが設定してあっても、フレックスボックス内では「flex-basis」で設定した値が優先で使われます。

※「max-width」や「min-width」が設定されている時は、それらが優先される。

flex-grow:

div {
    flex-grow: 0;
}

「flex-grow」を設定することで、コンテナの幅(主軸方向)が余っている時は、要素を引き伸ばすことが可能です。

初期値は「0」です。なので要素は伸びません。

図のように、本来なら80pxの余白が出る場合に下記の通りの指定をしました。

• 要素１に「flex-grow」を0
• 要素２に「flex-grow」を１
• 要素３に「flex-grow」を１
• 要素４に「flex-grow」を２

すると、余った余白を0:1:1:2で配分するので、

• 要素１が+0px
• 要素２が+20px
• 要素３が+20px
• 要素４が+40px

となります。

初期値が0なので、一つの要素にだけ「flex-grow」を「1」と指定して、その要素だけ可変幅にする手法がよく使われますね。

flex-shrink:

div {
    flex-shrink: 1;
}

要素の幅がフレックスコンテナの幅(主軸方向)よりも大きくなる場合の、要素の縮小比率が指定できます。

初期値は「1」です。

負の値は無効です。

図の例では、100px四方の四角形が4つがフレックスアイテムで、320pxのフレックスコンテナに入っていますが、スペースが80p足りないという状況ですね。

フレックスアイテムが80px縮めば全て収まります。そこで縮小比率を0:0:1:1に指定しました。
すると、ボックス3とボックス4が40pxずつ縮んで、フレックスコンテナに収まるという結果になります。

初期値が「1」なので、縮ませたくない要素にだけ「0」を設定するといいかもしれませんね。

flex:

「flex」というCSSのプロパティで、3つのプロパティを一括で指定できます。

div {
    flex: 0 1 auto;
}

初期値は「0 1 auto」です。flex-grow、flex-shrink、flex-basisの順番で指定します。

div {
    flex: none;
}

「flex」の値を「none」とすると、「0 0 auto」を指定したことになります。

div {
    flex: 1;
}

このように指定すると、flex-growの値が「1」で、flex-shrinkの値が「1」で(必ず)、flex-basisの値が「0」(必ず)となります。

注目してほしいのが、flex-basisの値が「0」になるということです。

初期値の「auto」だと要素の大きさはそれぞれあって、余ったフレックスコンテナの余白を分配する形になるので、要素の大きさ自体は何対何になるか分かりません。

ですが、flex-basisの値が「0」であることで、全てのフレックスアイテムに「flex」を設定した場合、その比率が自体が要素の幅となるので、使い勝手が良いためです。

まとめ

この記事では、CSSの「display」プロパティに「flex」を指定する方法を解説しました。

フレックスボックスは柔軟性が高く、とても使いやすいので、ぜひこの記事の内容を実際に試してみて下さい。

僕もよくフレックスボックスを使います。

また、下の動画でも「フレックスボックス」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

僕のTwitterでもプログラミング関連の呟きをしているので、ぜひ興味があれば。