解 説

floatの代わりにdisplay:flexを使用するとレイアウトが簡単になります。けれども、場合によっては思わぬ挙動となり困る場合が出てきます。それは例えば幅の問題です。Flexアイテムに指定した幅はしばしば無視されてしまうことがあります。

次の例はフロートを使用した固定レイアウトの例です。フロートレイアウトをFlexBoxでレイアウトした時に起こる現象です。

サンプル

単純に「display:flex」を使用するとwidthの値は無視されて横1列に並びます。今回は画像のwidthを100%としてフルードイメージにしていますので縮小されて横並びになります。
サンプル

flex-wrap:wrapを使用すると画像はフロートレイアウトのように2行3列の配置になります。
サンプル

Flex Boxレイアウト関連記事