Flexboxの項目は行に設定されません

Question

私はFlexboxを使用してポートフォリオを構築しています。私は最初にモバイルビューでそれを書いて、うまくいきました。ウィンドウをフルサイズにリサイズすると、アイテムが水平方向に整列することが期待されます（フレックスフロー：行折り返しを設定します）が、列内に残ります。

イメージ自体のサイズを変更し、余白/パディング/ etcを調整しようとしましたが、各行に複数のアイテムが1つも表示されません。理想的には、各行は3-4項目を保持する。ここ

.projects { 
    display:flex; 
    flex-flow:row wrap; 
    justify-content:space-between; 
} 

.item { 
    border:1px solid white; 
    padding:5%; 
    margin:5% auto; 
} 

.item img { 
    max-width:100%; 
    height:auto; 
} 

.caption { 
    font-size:0.75rem; 
    border-top:1px solid white; 
    width:80%; 
    margin:0 auto; 
} 

完全なコードは： http://codepen.io/duggalsf/pen/bwjpLo

何かアドバイスは参考になります。 （メディアクエリを行うだけでいいのかどうか教えてください。フレックスボックスグリッドを使用するとメディアクエリは不要です）ありがとうございます！

Answer 1

.projects ul { 
    display:flex; 
    flex-flow:row wrap; 
    justify-content:space-around; 
} 

あなたの代わりに.projectsの.projects ULを使用する必要があります。仕事をheresします。Fiddle

Answer 2

このクラスを変更してください： -

.item { 
    border:1px solid white; 
    padding:5%; 
    margin:5% auto; 
    display:inline-block; /* add this class */ 
}