DAY34.デザインカンプからコーディング編 横並びカードのコーディング

01.PC時のカードのコードディング

横並びをするために”display: flex;”

改行するために”flex-wrap: wrap;

実務ではカードの増減を考慮する必要がある

横並びをピッタリにする
(100% / カード枚数 - 余白の幅 * 余白の数 / カード枚数 )

:nth-child()
cssを適用する要素を指定するときに使う

:not()
指定した要素以外に適用する

改行ありで使える横並び3パターン
①display: flex;
②display: inline-block;
③float: 〇〇;

この記事が気に入ったらサポートをしてみませんか?