ここからは、Flexboxの使い方の基礎とFlexboxの各プロパティを紹介します。
→ 前編はこちら

●Flexboxの基礎

それでは実際にFlexboxの使い方をご紹介します。 Flexboxは、まず親要素をFlex containerにします。Flex containerは、displayプロパティにflexを（display:flex;）指定します。

「display:flex;」を指定した配下の要素はFlex itemになります。

●Flexboxのプロパティ

Flexboxのプロパティは多いと思われがちですが、全部で12種類です。 Flex containerに使えるプロパティと、Flex itemに使えるプロパティがそれぞれあります。

［Flex containerプロパティ］

プロパティ	指定できる値	説明
flex-direction	［Value］  row、row-reverse、column、 column-reverse ［Initial］  row	Flex container内のitemの並びを縦か横に設定
flex-wrap	［Value］  nowrap、wrap、wrap-reverse ［Initial］  nowrap	Flex container内のitemの折り返しの指定
flex-flow	［Value］ ＜flex-direction＞||＜flex-wrap＞ ［Initial］  row nowrap	flex-directionとflex-wrapをまとめて設定
justify-content	［Value］  flex-start、flex-end、center、space-between、space-around ［Initial］  flex-start	横並びの位置を指定（左揃え、右揃え、中央揃え、均等配置）
align-items	［Value］  flex-start、flex-end、center、baseline、stretch ［Initial］  stretch	縦並びの位置を指定（上揃え、下揃え、中央揃え、ベースライン、等幅）
align-content	［Value］  flex-start、flex-end、center、space-between、space-around、stretch ［Initial］  stretch	複数行にまたがった縦並びの位置を指定（上揃え、下揃え、中央揃え、均等配置）

［Flex itemプロパティ］

プロパティ	指定できる値	説明
order	［Value］ ＜integer＞ ［Initial］  0	Flex itemの並び順を指定
flex-grow	［Value］ ＜number＞ ［Initial］  0	Flex itemが画面幅に満たない場合に伸びる倍率
flex-shrink	［Value］ ＜number＞ ［Initial］  1	Flex itemの幅が画面サイズより小さい場合に縮む倍率
flex-basis	［Value］  content、＜'width'＞ ［Initial］  auto	Flex itemの基準幅を設定
flex	［Value］  none、[ ＜‘flex-grow’＞ ＜‘flex-shrink’？? || ＜‘flex-basis’＞ ] ［Initial］  10 auto	flex-grow、flex-shrink、flex-basisをまとめて指定
align-self	［Value］  auto、flex-start、flex-end、center、baseline、stretch ［Initial］  auto	Flex itemの縦並び位置を指定

［参加者からの質問1］
Flexboxを学ぶ上で、最低限覚えておいた方が良いことや参考になるサイトがあれば教えてほしい。

回答：
まずはFlexboxのプロパティ12種類を覚えることです。何も見ずに記述できるようになる必要はありませんが、どのようなプロパティがあって、どのような動きをするのかくらいは覚えたほうがよいでしょう。

動きの確認は、神戸ITフェスティバルで使用したスライドにも掲載しているので、そちらでも確認いただけます。
http://shared-blog.kddi-web.com/sandbox/flexbox-s/#/22（23 – 31ページ）

12種類あるプロパティを覚えたら、どのような場所で活用できるか実際のサンプルとソースコードを見ることです。ソースコードのサンプルは「Flexbox Patterns」などが参考になります。
http://www.flexboxpatterns.com/home

［参加者からの質問2］
Flexboxを実案件で取り入れる場合の注意点はありますか（対応ブラウザについて）。

回答：
Flexboxが対応するブラウザを事前に確認し、取り決めを作っておくことをお薦めします。モジュールのブラウザサポートをまとめて確認できる”Can I use”を使うと非常に便利です。こちらを参考にすると、Flexboxの対応ブラウザは、IE10以降、Android4.3以降、iOS8.4以降と取り決めできます。詳しくはCan I useを参照ください。
http://caniuse.com/#search=flexbox

なお、IE8や9にも対応したい場合は、flexibility.js（Polifil）を利用することで対処できます。
https://github.com/jonathantneal/flexibility

参考例として、私が運営しているCPIスタッフブログの場合、Flexboxが対応していないユーザーのアクセスは、2016年12月現在で1%でした。1,000人アクセスがあった場合、10人がレイアウト崩れを起こすことになります。Flexboxを使わずに多くの工数をかけて（昔の手法で）、この10人のためにレイアウト組みをするかどうかは企業の考え方次第ですので、必ず事前に確認をしましょう。

レイアウトが崩れても文字が読めれば良いという程度であれば、レイアウト全体に使うのではなく、パーツごとの利用などにも使えます。

以上Flexboxの紹介でした。

Flexboxを一度使うと、CSSで用意されているfloatsやclearfixを使ったレイアウト構築が、非常に面倒に感じてしまうことでしょう。今後、制作の現場でも多く使われていくようになりますので、今の内から使えるようにしておくと良いと思います。

また、私が運営しているCPIスタッフブログにもFlexboxの記事がいくつかありますので、合わせてよろしくお願いいたします。