このページの中身

並べ方（Flexbox と Grid）

並べる個数・向き・折り返し・寄せ・列の作り方をつまみで動かし、箱が実際に並ぶのを見てから CSS を持ち帰る。参考にした作業面: digtools CSS レイアウトジェネレーター、Every Layout。

つまみ#

見本#

持ち帰る#

.layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
}

つまみは JavaScript で動きます。無効の場合は、上の見本は既定の値で描かれ、コピー欄には出発点のCSSと同じ既定の値が入っています。

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。