150%;}コーディングの解説HTMLの構造カードを4つ繰り返したものをカードグループを親要素として囲いました。カード単体のHTML構造は少し難しいですが、カードグループはそれらを1つのタグでまとめただけのシンプルな構造です。row;で水平方向(横並べ)にカードを並べていきます。wrap;で子要素が親要素の横幅を超えそうになった時に折り返しがされるようにします。flex-start;は水平方向の並びを左揃えにしています。部分でカードグループの直接の子要素を指定しています。:nth-child(2n)でカードグループの直接の子要素の中でも2行目のカード(偶数番目)の要素だけを指定しています。2行目の要素だけに対して左側の余白を20ピクセル分とることで横並べの間隔をつくっています。部分でカードグループの直接の子要素を指定しています。:nth-child(n+3)でカードグループの直接の子要素の中でも3番目以降のカードの要素だけを指定しています。3番目以降のカードの要素だけに対して上側の余白を20ピクセル分とることで上下の間隔をつくっています。行数calc関数で横幅を計算することで1行あたりの横幅を計算することができます。100%が全体の横幅、20pxが1つの左右の間隔の大きさ。左右の間隔は1個です。全体から余白を引いて行の数で割ることで、1行あたりの横幅が計算できます。CodePenで完成品をデモでみる。応用できるようにすこしアレンジしてみましょう。20px;}否定セレクタ(:not)と1行目の要素(3n-2)の組み合わせで最初の行以外の要素を選択しています。3);}3行の場合はカードとカードの間の隙間は2箇所あるので余白は20px*2になります。全体から余白をのぞいたものを3行で割ります。まとめ今回はカードグループのコーディングをしてみました。フレックスボックスと各要素の幅、間隔の指定の仕方をマスターすることでカードグループのコーディングができるようになります。他の実装方法もなくはないのですが、綺麗に正確なコーディングから少し遠ざかってしまうので今回の方法がおすすめです。今回の記事は中級から上級です。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。