display:flexにおける子要素の動き

ご回答頂けると幸いです。
単純な質問なのかもしれませんが、display:flexを使って５つの.flex_itemsを横に並べようと思ったのですが、折り返した後に縦に隙間が発生してしまいます。

親要素であるmainのheightを600pxにすれば縦の隙間ができることなく折り返してくれるのですが、600px以上だと隙間が発生してしまいます。
flexの仕様なのでしょうか？

ブラウザーはsafari・chrome・FireFox（全て最新）で試しましたが一緒でした。