HTML・CSS WordPress 初心者

【CSS Flexbox】フレックスボックスの使い方と応用方法について解説

【CSS Flexbox】フレックスボックスの使い方と応用方法について解説

皆さんは、CSSで横並びや縦並びのレイアウトを作る時に便利なFlexbox(フレックスボックス)の使い方は、ご存知でしょうか?

Flexboxは、オプションとして付け加えられるプロパティが多いため、その名前の通り、とてもフレキシブル(柔軟)にレイアウトを組むことができます。

今までは、慣れていたからfloatで横並びのレイアウトを作っていたという方でも、Flexboxの使い方を覚えてしまうと、今後は使わずにはいられなくなることでしょう。

とは言っても、使えるプロパティが多いため、慣れるまで少し時間がかかるかと思いますので、覚えるのが難しい人は、このチートシートをブックマークして、いつでも確認できるようにしておくと良いでしょう。

それでは、Flexboxの基本的な使い方と応用方法について解説していきたいと思います。

 

 

CSS Flexboxで何ができるのか

CSS Flexboxで何ができるのか

CSSのFlexboxを使うことによって、要素の縦横の配置する間隔を変えたり、配置順を変更したり、比率を変更したりと言うことが少ないコードで行うことができるので、デザインを変えたい場合や、急な仕様の変更時でも柔軟に対応できるメリットがあります。

例えば、画像のギャラリーページを作りたい場合に、Flexboxを使うことによって、大きさが不確定な画像が入ってきたとしても、比率を調節したりして違和感なくレイアウト上に、はめ込むことが出来ます。

このように、Flexboxを汎用性に優れているため従来のfloatプロパティでは、実現が困難であった複雑なレイアウトを簡単に作ることができます。

Flexboxで出来るレイアウトを見る

 

CSS Flexboxの基本的な使い方

CSS Flexboxの基本的な使い方

まず、Flexboxでレイアウトを組み場合は、Flexアイテム(子要素)と、それを包含するためのFlexコンテナー(親要素)を作る必要があります。

今回の場合ですと、親要素として「flex_container」というクラスと、子要素として「flex_item」というクラスのdiv要素でレイアウト組んでいます。

そして、以下のようにHTMLとCSSを記述することによって、Flexboxを適用することができます。

ただし、Flexboxを使う際の指定方法は、二種類存在しますので、その点も合わせて確認しておきましょう。

 

HTML

<div class="flex_container">
    <div class="flex_item">item01</div>
    <div class="flex_item">item02</div>
    <div class="flex_item">item03</div>
</div>

 

CSS

display: flex;

display: flex;を指定した子要素は横に並ぶようになります。

.flex_container {
    display: flex;
}

 

display: inline-flex;

display: inline-flex;は指定した要素がインライン要素の特性を持たせながら、子要素を横に並びにすることができます。

.flex_container {
    display: inline-flex;
}

 

親要素に使えるプロパティ

  • flex-direction (子要素の並ぶ向き)
  • flex-wrap (子要素の折り返し方)
  • justify-content (水平方向の並び方)
  • align-items (垂直方向の並び方)
  • align-content (複数行の並び方)

 

 

flex-direction (子要素の並ぶ向き)

使える値一覧

  • row (デフォルト)
  • row-reverse (逆順に横並び)
  • column (縦並び)
  • column-reverse (逆順に縦並び)

flex-directionのレイアウトを見る

 

flex-direction: row; (デフォルト)

flex-direction: row; (デフォルト)

.flex_container {
    display: flex;
    flex-direction: row;
}

 

flex-direction: row-reverse; (逆順に横並び)

flex-direction: row-reverse; (逆順に横並び)

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

 

flex-direction: column; (縦並び)

flex-direction: column; (縦並び)

.flex_container {
    display: flex;
    flex-direction: column;
}

 

flex-direction: column-reverse; (逆順に縦並び)

flex-direction: column-reverse; (逆順に縦並び)

.flex_container {
    display: flex;
    flex-direction: column-reverse;
}

 

flex-wrap (子要素の折り返し方)

使える値一覧

  • nowrap (デフォルト)
  • wrap (はみ出したアイテムを折り返す)
  • wrap-reverse (はみ出したアイテムを逆順に折り返す)

flex-wrapのレイアウトを見る

 

flex-wrap: nowrap; (デフォルト)

flex-wrap: nowrap; (デフォルト)

.flex_container {
    display: flex;
    flex-wrap: nowrap;
}

 

flex-wrap: wrap; (はみ出したアイテムを折り返す)

flex-wrap: wrap; (はみ出したアイテムを折り返す)

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

 

flex-wrap: wrap-reverse; (はみ出したアイテムを逆順に折り返す)

flex-wrap: wrap-reverse; (はみ出したアイテムを逆順に折り返す)

.flex_container {
    display: flex;
    flex-wrap: wrap-reverse;
}

 

justify-content (水平方向の並び方)

使える値一覧

  • flex-start (デフォルト)
  • flex-end (右寄せで横並び)
  • center (中央に横並び)
  • space-between (最初と最後のアイテムを両端に配置して、残りは均等に横並び)
  • space-around (均等に横並び)

justify-contentのレイアウトを見る

 

justify-content: flex-start; (デフォルト)

justify-content: flex-start; (デフォルト)

.flex_container {
    display: flex;
    justify-content: flex-start;
}

 

justify-content: flex-end; (右寄せで横並び)

justify-content: flex-end; (右寄せで横並び)

.flex_container {
    display: flex;
    justify-content: flex-end;
}

 

justify-content: center; (中央に横並び)

justify-content: center; (中央に横並び)

.flex_container {
    display: flex;
    justify-content: center;
}

 

justify-content: space-between; (最初と最後のアイテムを両端に配置して、残りは均等に横並び)

justify-content: space-between; (最初と最後のアイテムを両端に配置して、残りは均等に横並び)

.flex_container {
    display: flex;
    justify-content: space-between;
}

 

justify-content: space-around; (均等に横並び)

justify-content: space-around; (均等に横並び)

.flex_container {
    display: flex;
    justify-content: space-around;
}

 

align-items (垂直方向の並び方)

使える値一覧

  • stretch (デフォルト:縦幅いっぱいに伸ばす)
  • flex-start (縦に上揃え)
  • flex-end (縦に下揃え)
  • center (縦に中央揃え)
  • baseline (ベースラインに揃える)

align-itemsのレイアウトを見る

 

align-items: stretch; (デフォルト:縦幅いっぱいに伸ばす)

align-items: stretch; (デフォルト:縦幅いっぱいに伸ばす)

.flex_container {
    display: flex;
    align-items: stretch;
}

 

align-items: flex-start; (縦に上揃え)

align-items: flex-start; (縦に上揃え)

.flex_container {
    display: flex;
    align-items: flex-start;
}

 

align-items: flex-end; (縦に下揃え)

align-items: flex-end; (縦に下揃え)

.flex_container {
    display: flex;
    align-items: flex-end;
}

 

align-items: center; (縦に中央揃え)

align-items: center; (縦に中央揃え)

.flex_container {
    display: flex;
    align-items: center;
}

 

align-items: baseline; (ベースラインに揃える)

align-items: baseline; (ベースラインに揃える)

.flex_container {
    display: flex;
    align-items: baseline;
}

 

align-content (複数行の並び方)

使える値一覧

  • stretch (デフォルト:Flexコンテナーの縦幅いっぱいに伸ばす)
  • flex-start (Flexコンテナーの開始位置に上揃え)
  • flex-end (Flexコンテナーの終わり位置に下揃え)
  • center (Flexコンテナーの縦中央に揃える)
  • space-between (最初と最後の要素を上下に配置して、それ以外は均等に配置)
  • space-around (縦に均等配置)

align-contentのレイアウトを見る

 

align-content: stretch; (デフォルト:Flexコンテナーの縦幅いっぱいに伸ばす)

align-content: stretch; (デフォルト:Flexコンテナーの縦幅いっぱいに伸ばす)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}

 

align-content: flex-start; (Flexコンテナーの開始位置に上揃え)

align-content: flex-start; (Flexコンテナーの開始位置に上揃え)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

 

align-content: flex-end; (Flexコンテナーの終わり位置に下揃え)

align-content: flex-end; (Flexコンテナーの終わり位置に下揃え)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

 

align-content: center; (Flexコンテナーの縦中央に揃える)

align-content: center; (Flexコンテナーの縦中央に揃える)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

 

align-content: space-between; (最初と最後の要素を上下に配置して、それ以外は均等に配置)

align-content: space-between; (最初と最後の要素を上下に配置して、それ以外は均等に配置)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

 

align-content: space-around; (縦に均等配置)

align-content: space-around; (縦に均等配置)

.flex_container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

 

子要素に使えるプロパティ

  • order (子要素の並ぶ順番の入れ替え方)
  • flex-grow (子要素の横幅の比率の変え方)
  • flex-shrink (子要素の横幅の縮む比率の変え方)
  • flex-basis (子要素の基準となる横幅の指定)
  • align-self (子要素の垂直方向の揃え方)

 

order (子要素の並ぶ順番の入れ替え方)

order (子要素の並ぶ順番の入れ替え方)

.flex_container
.flex_item:ntn-of-type(1) {
    order: 1;
}

.flex_container
.flex_item:ntn-of-type(2) {
    order: 0;
}

.flex_container
.flex_item:ntn-of-type(3) {
    order: -1;
}

orderのレイアウトを見る

 

flex-grow (子要素の横幅の比率の変え方)

flex-grow (子要素の横幅の比率の変え方)

.flex_container
.flex_item:ntn-of-type(1) {
    flex-grow: 1;
}

.flex_container
.flex_item:ntn-of-type(2) {
    flex-grow: 2;
}

.flex_container
.flex_item:ntn-of-type(3) {
    flex-grow: 4;
}

flex-growのレイアウトを見る

 

flex-shrink (子要素の横幅の縮む比率の変え方)

flex-shrink (子要素の横幅の縮む比率の変え方)

.flex_container
.flex_item:ntn-of-type(1) {
    flex-shrink: 3;
}

.flex_container
.flex_item:ntn-of-type(2) {
    flex-shrink: 3;
}

.flex_container
.flex_item:ntn-of-type(3) {
    flex-shrink: 4;
}

flex-shrinkのレイアウトを見る

 

flex-basis (子要素の基準となる横幅の指定)

flex-basis (子要素の基準となる横幅の指定)

.flex_container
.flex_item:ntn-of-type(1) {
    flex-basis: 80%;
}

.flex_container
.flex_item:ntn-of-type(2) {
    flex-basis: auto;
}

.flex_container
.flex_item:ntn-of-type(3) {
    flex-basis: 200px;
}

flex-basisのレイアウトを見る

 

align-self (子要素の垂直方向の揃え方)

使える値一覧

  • auto (デフォルト)
  • flex-start (Flexコンテナーの開始位置に上揃え)
  • flex-end (Flexコンテナーの終わり位置に下揃え)
  • center (Flexコンテナーの縦中央揃え)
  • stretch (Flexコンテナーの縦幅いっぱいに伸ばす)
  • baseline (ベースラインに揃える)

align-selfのレイアウトを見る

 

align-self: auto; (デフォルト)

align-self: auto; (デフォルト)

.flex_container
.flex_item {
    align-self: auto;
}

 

align-self: flex-start; (Flexコンテナーの開始位置に上揃え)

align-self: flex-start; (Flexコンテナーの開始位置に上揃え)

.flex_container
.flex_item:ntn-of-type(2) {
    align-self: flex-start;
}

 

align-self: flex-end; (Flexコンテナーの終わり位置に下揃え)

align-self: flex-end; (Flexコンテナーの終わり位置に下揃え)

.flex_container
.flex_item:ntn-of-type(2) {
    align-self: flex-end;
}

 

align-self: center; (Flexコンテナーの縦中央揃え)

align-self: center; (Flexコンテナーの縦中央揃え)

.flex_container {
    display: flex;
}

.flex_container
.flex_item:ntn-of-type(2) {
    align-self: center;
}

 

align-self: stretch; (Flexコンテナーの縦幅いっぱいに伸ばす)

align-self: stretch; (Flexコンテナーの縦幅いっぱいに伸ばす)

.flex_container
.flex_item {
    align-self: stretch;
}

 

align-self: baseline; (ベースラインに揃える)

align-self: baseline; (ベースラインに揃える)

.flex_container
.flex_item:ntn-of-type(2) {
    align-self: baseline;
}

 

CSS Flexboxの応用方法

CSS Flexboxの応用方法

Flexboxは使えるプロパティが多くて便利なのですが、コードが少し長めの書き方になりやすい傾向があるので、省略して書きたい場合があるかと思います。

そんな時に使える、別のプロパティを紹介したいと思います。

詳しくは、下記をご覧ください。

 

「flex-direction、flex-wrap」を同時に使う

flex-flow

.flex_container {
    display: flex;
    flex-flow: row wrap;
}

 

「flex-grow、flex-shrink、flex-basis」を同時に使う

flex

.flex_container
.flex_item {
    flex: 2 1 50%;
}

 

まとめ

今回は、Flexboxの基本的な使い方と応用方法について解説してきましたが、いかがでしたでしょうか?

横並びや縦並びのレイアウトを組む時は、Flexboxが最適であることが分かっていただけたかと思います。

もう、使い慣れてるからと言って、わざわざfloatを使うこともなくなることでしょう。

ですが、Flexboxの全ての使い方を記憶するのは、少々大変かと思いますので、よく使うプロパティだけ覚えておいて、あとは検索するなどして、その時々で思い出しながら使うのが、ちょうど良いでしょう。

それでは、皆さん良いコーディングライフを!

 

【31日間無料】U-NEXTで話題の映画、アニメ、漫画を見まくろう!

無料トライアル実施中!<U-NEXT>

  • この記事を書いた人

ゲンキ

物作りと情報発信が好きなWEBエンジニア。
高卒で肉体労働や不安定な職を転々とする生活の中、一念発起し独学でプログラミングの学習を開始。
低学歴・学習能力ゼロ・貯金ゼロ・人脈ゼロ・語彙力ゼロ・コミュ力無し・PCスキル無し・うつ病・HSP・発達障害(ASD / ADHD)という極限状態に絶望するも、自力でスキルを身に付ける努力を続ける。
プログラミング習得後はWEB制作(フロントエンド / バックエンドの実装)の仕事をして、休みの日は、趣味でアプリの開発をしたり、日々学んだことをブログとして、まとめる生活をしています。

-HTML・CSS, WordPress 初心者

Copyright© Webサイトで稼ぐ技術 , 2021 All Rights Reserved Powered by AFFINGER5.