【CSS】Flexbox（フレックスボックス）の使い方について
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
CSSのFlexbox（フレックスボックス）の使い方について解説していきます。
フレックスボックスは、サイト制作において要素を横並びにする際に必ずと言っていいほど使用するレイアウト手法です。
プロパティの値や使い方は多岐に渡りますので、特に仕事でよく使用するものについて詳しく解説していきます。
目次
1. Flexbox（フレックスボックス）とは？
フレックスボックス（Flexbox）は、要素を横並びにする際に使用するレイアウトモデルの一つです。
「inline」「inline-block」と比べて並び方や折り返し方の設定方法が幅広く用意されているので、要素を横並びにする際はフレックスボックスがよく使用されます。
2. Flexbox（フレックスボックス）の使用方法
フレックスボックスは、displayプロパティの値に「flex」を指定することで使用できます。
display: flex;
並び方を指定する際は、下記のようなプロパティと一緒に指定します。
上記は、特によく使うものだけをピックアップしていますが、その他にも「flex-grow」「flex-shrink」「flex-basis」など色々なプロパティがあります。
3. justify-content
横方向の配置場所を指定するプロパティです。
プロパティの主な値は下記の通りです。
flex-start：左揃え（初期値）
フレックスボックスのアイテムを左揃えにします。
※justify-contentプロパティの初期値です。
justify-content: flex-start;
flex-end：右揃え
フレックスボックスのアイテムを右揃えにします。
justify-content: flex-end;
center：中央揃え
フレックスボックスのアイテムを中央揃えにします。
justify-content: center;
space-between：均等割り付け
フレックスボックスのアイテムを均等割り付け（両端で揃うよう均等に配置）にします。
justify-content: space-between;
4. align-items
縦方向の配置場所を指定するプロパティです。
プロパティの主な値は下記の通りです。
stretch：上揃え（初期値）
フレックスボックスのアイテムを上揃えにします。アイテムの高さが揃います。
※align-itemsプロパティの初期値です。
align-items: stretch;
flex-start：上揃え
フレックスボックスのアイテムを上揃えにします。「stretch」とは異なり、アイテムの高さは揃いません。
align-items: flex-start;
flex-end：下揃え
フレックスボックスのアイテムを下揃えにします。
align-items: flex-end;
center：中央揃え
フレックスボックスのアイテムを中央揃えにします。
align-items: center;
5. flex-direction
アイテムの配置方向を指定するプロパティです。
プロパティの主な値は下記の通りです。
row：左から右（初期値）
フレックスボックスのアイテムを横方向に左から右に向けて配置します。
※flex-directionプロパティの初期値です。
flex-direction: row;
row-reverse：rowの逆順
「row」の逆方向に配置します。
flex-direction: row-reverse;
column：上から下
フレックスボックスのアイテムを縦方向に上から下に向けて配置します。
flex-direction: column;
column-reverse：columnの逆順
「column」の逆方向に配置します。
flex-direction: column-reverse;
6. flex-wrap
アイテムの折り返しを指定するプロパティです。
プロパティの主な値は下記の通りです。
nowrap：折り返しなし（初期値）
フレックスボックスのアイテムは折り返しを行いません。
※flex-wrapプロパティの初期値です。
flex-wrap: nowrap;
wrap：折り返しあり
フレックスボックスのアイテムは左から順に配置され、親要素の幅からはみ出してしまう場合に折り返して複数行で表示されます。2行目以降のアイテムも左から順に配置されます。
flex-wrap: wrap;
7. まとめ
CSSのFlexbox（フレックスボックス）の使い方について解説してきました。
フレックスボックスについてまとめると下記の通りです。
フレックスボックスは、displayプロパティの値に「flex」を指定することで使用できます。
display: flex;
下記のようなプロパティと一緒に使用することで並び順や並び方などを細かく指定することができます。
フレックスボックスは、サイト制作において最もよく使うレイアウト手法の一つです。
しっかりと理解して使いこなせるようにしておきましょう！
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
