- CSS Flexbox Playgroundは、Flexboxプロパティをリアルタイムで変更しながらレイアウトの変化を確認できる学習ツール
- コントロールを調整すると、flex設定が画面レイアウトに与える影響をすぐに比較できる
- 基本サンプルは
display: flex, flex-direction: row, justify-content: space-around, align-items: flex-start, flex-wrap: nowrap の組み合わせで始まる
- 画面上の
1 から 5 までの項目が設定変更に応じて動くため、レイアウト結果を視覚的に確認しやすい
- 生成されたCSSコードをコピーできるので、試した設定を実際のコードに移しやすい
リアルタイムFlexbox実験ツール
- CSS Flexbox Playgroundは、Flexboxプロパティを学び、実験するためのインタラクティブなツール
- コントロールを調整すると、レイアウトの変化がリアルタイムで反映される
- 実験結果として生成されたCSSコードをコピーできる
基本サンプル設定
- サンプルの
.container設定では次のCSSを使用している
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
flex-wrap: nowrap;
}
- 画面には
1, 2, 3, 4, 5 の項目が表示され、Flexboxの配置結果を確認できる
1件のコメント
Hacker Newsの意見
Flexbox自体はシンプルで理にかなっているが、プロパティ名や値の名前が委員会方式で決められたようで直感的ではない
justify-contentとalign-itemsのどちらが何だったかを思い出そうとして結局諦め、うまくいくまであれこれ変えて試すことになるGrid向けの似たガイドもあり、そちらも素晴らしい
特にSPAで、箱が画面を埋めつつはみ出さないようにする必要があるときに重要。結局あちこちに**
min-width: 0**のようなまったく直感的でない設定を入れ、さらにいくつか調整していると何とかなるこれらすべてをカバーするCSSクラスをいくつか作れそうではあるが、まだあらゆる場合に合う解法は見つけられていない
display: flexルールの横にあるアイコンを押すと、複数のFlexboxプロパティがアイコンで可視化され、クリックしてその場で設定できる事実上、どのページも実験場になる
justify-content: centerはjustify-center、align-items: centerはitems-centerだなんて、なぜこうしたのか分からないjustify-contentはmain-axis、align-itemsはcross-axisと呼ぶべきだったこれを理解するとFlexbox全体が簡単になる
すでに何度も挙がっているが、Flexbox Froggy https://flexboxfroggy.com/を勧めてきたし、他の人たちもすぐに身につけていた
CSS Gridを学ぶにはhttps://cssgridgarden.com/も良い
子ども向けに近いhttps://www.codemonkey.com/に似ている
Bootstrapコードを作るときはhttps://build.layoutit.com/が便利で、CSS Grid向けにはhttps://grid.layoutit.com/がある。ただし前者はBootstrap 5ではなくBootstrap 4までしか対応していないのが残念
Joshのガイド https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/を強くおすすめする
flex-basis、自動マージン、min-widthのような、より高度な落とし穴やTipsを詳しく扱っているFlexboxとTailwind CSSコンポーネントはかなりよく分かっていると思っていたが、この記事は理論的な土台への渇きをうまく満たしてくれた
良いプレイグラウンドだ
数年前、終盤に似たようなプレイグラウンドを入れたインタラクティブガイドを作った: https://lik.ai/guides/an-interactive-guide-to-flexbox/
ときどき記憶を呼び戻すのに役立った
2025年になり、2年とチュートリアル3本を経たが、いまだにFlexboxをまともに使えない
https://flexboxfroggy.com/もあまり役に立たなかった
justifyとalignは最初の試行では必ず逆になるCSS floatレイアウトを含め、いろいろなことは何年も覚えているのに、Flexboxは数か月使わないと80%を忘れてしまい、最初から読み直してプレイグラウンドで時間を使わなければならない
問題はプロパティ名が多すぎること、そしてそのかなりの数が直感的でないか、単に間違った名前のように感じられることだ。むしろ1〜2文字の記号名を付けていても同じようなものだったかもしれない
このツールが役に立つことを願っているし、足りないものがあれば教えてほしい
なぜこのプロパティ名を
justify-content、align-itemsにしたのだろうかmain-axis-arrangementとcross-axis-alignmentのほうが筋が通るのではないかcolor、text-align、position: absoluteとposition: fixedなどもそうだし、absoluteも技術的には依然として相対的であるjustify-items、justify-selfとの慣例にも沿っているので一貫性はあるそれでも
align-contentとは今でも紛らわしいgrid-templateのショートハンドが y 軸を先に書くことも紛らわしい:y1 / x1 / y2 / x2しかも 0 始まりでもないので、いつも忘れてしまう
cross-axis-centerをalign-items: centerに、main-axis-betweenをjustify-content: space-betweenにマッピングするような Tailwind エイリアスプラグインはすぐ作れるもちろん変更はできるが、Flexbox のデフォルト動作はこの覚え方でカバーできる
Flexbox を学ぶときにプロパティを調べるため、チートシートを作った
他の人にも役立つかもしれない: https://darekkay.com/flexbox-cheatsheet/
ざっと見る視覚的なチートシートとしては良いが、結局はプロジェクトのあちこちで使ってみて体で覚えるものだと思う
構文はおおむね自己説明的だが、
rowとcolumnは例外だFlexbox や Grid の大半で大きく迷ったことはないが、多くの人が混乱しているのは分かる。ボックスモデルを理解し、Firefox 開発者ツールを使うと Flexbox モデルを学ぶときに大きな助けになる。コンテナをかなりうまく可視化してくれるし、今では Chrome 開発者ツールも似たようになっているようだ
flexboxfroggy と cssgridgarden も練習に役立った。それでも構文を見るために毎回 CSS-Tricks のチートシートを開くし、
rowなのかcolumnなのかは初回の試行では絶対に当てられないFlex モードの切り替えを素早くトグルできる https://imgur.com/a/17iy1eN
このツールはコンテナのプロパティ 4 つだけを扱っていて、かなり限定的に見える
Flexbox でかなり重要な 子要素のプロパティが完全に抜けている
CSS レイアウトを練習できる面白い課題集があるとよさそうだ
よく書かれた解説と説明、そして「なぜこのコード片では望むレイアウトにならないのか」といった デバッグ課題もあるとよいと思う
CSS の問題のデバッグには ChatGPT がかなり役に立った。常に正しいわけではないが、たいてい正しい方向を示してくれる。それでも CSS が実際にどう動くのかをもっと深く理解したい。本やチュートリアルも読んだし、結局はルールの集合だということは分かっているが、正確に適用するのは難しい
望む見た目になるよう CSS を直して書き直してほしいとよく頼んでいて、ドキュメントを探し回るよりはるかに速くやってくれる