html(2カラム)
<div id="items">
<div>item1</div>
<div>item2</div>
</div>
css
#items {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#items div {
width: 48%;
}
これで#items中のdivが48%(隙間を空けないなら50%)になり、2カラムになります。
3カラムの場合は#items中のdivを3つにしてwidthを33%とかですね。
flex-wrap: wrap;で上位要素の中で折り返し、justify-content: space-betweenで等間隔配置の左、右の余白無し、つまり左、右に中のdivが寄るので、divの中が画像等場合、親要素等と左端、右端がきっちり揃います。
以上、商品などアイテムの2カラム、3カラムの一覧に適したflexデザインでした。