Flexレイアウトでややこしいなぁ…と思うこと覚え書き

チートシート

https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3
https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl

Flexbox & Grid レイアウト共通

gap / row-gap / column-gap / start / end …

Grid と Flex の両方に使えるよ。
Grid レイアウト専用の grid-column-gap や Flexbox専用の flex-start などもあるが、両方で使えるように1本化された。

flex 初期値

flex: 0 1 auto; = flex-grow: 0; flex-shrink: 1; flex-basis: auto;

flex:1

= flex: 1 1 0;

Flexbox

flex: 1 = flex: 1 1 0;

均等幅に使用する flex:1 は flex: 1 1 0; と同じ

flex-basis、width で幅指定する場合の違いは?

どちらで幅指定しても同じだが、両方設定されている場合は flex-basis の値が適用される。
同じなら width 使っておく方が分かりやすい気がする。

Grid で同じ大きさのアイテムを複数行に並べる

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
// row と column の gap を別々に指定する場合は下記
// gap: 30px 40px; 
// row-gap: 30px; 
// column-gap: 40px;

コメントを残す

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