display: flex; で要素を横並びにしつつ、２行や３行にしたいときがあるじゃないですか。そんなときに便利です。
flex-wrap指定なし
まず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値はデフォルトのno-wrapになります。
すると、子要素（div.box）のwidth: 200px;が無視されます。画面に１行に収まるようにwidthが自動調整されるのです。
flex-wrap: wrap;措定
次に、flex-wrap: wrap;を指定します。
すると、子要素のwidthは200pxのままで横並びになります。改行が許容されるので、溢れでた子要素は次の行に落ちます。
良かったですね！もうfloatを使う必要はありません。ましてや、table要素でレイアウトするなんてことは過去のテクニックです。
中央寄せ・外寄せ
余談です。
横並び＋改行には成功しましたが、実務では「中央寄せ」か「外寄せ」にすることがあるかもしれません。
そんなときは、justify-contentを指定します。
justify-content: space-around; を親要素に指定すると、子要素が中央寄せになります。
justify-content: space-between;を指定すると、要素が外寄せになります。
（わかりやすいように画面幅を変えました。）
レガシーブラウザ
display: flex; + flex-wrap: wrap; の組み合わせは便利なのですが、残念ながら対応していないブラウザがあります。
Can I use... Support tables for HTML5, CSS3, etc
