よく使うflexのパターン 2カラム 3カラム

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デザインでした。

投稿日:
カテゴリー: 未分類

コメントする

メールアドレスが公開されることはありません。