Flexbox / Grid レイアウトチートシート

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

Grid中央揃え参考：

CSS Gridで使う
・place-content
・place-items
の違い。

1つの要素の上下左右中央揃えしたいだけならどちらか一つを使えばよい。

複数の要素をまとめて配置したい場合はこの挙動の違いを覚えておくとラク。

今夜9時からデモしますhttps://t.co/SQ8SW2obCK #codershigh2022 #脱IE時代のモダンCSS pic.twitter.com/wu0T4kqlKO
— 鹿野壮 12/9 DIST (@tonkotsuboy_com) November 25, 2022

チートシート

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;