Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle

flexboxleは、CSS Flexboxをマスターするための毎日楽しめるパズルゲームです。CSS FlexboxのプロパティやTailwind CSSのクラスを使用してHTMLを記述し、目標のレイアウトに合わせて要素を配置します。

利用にあたって、登録やログインなど面倒なことは必要ありません、誰でも無料で利用できます。

flexboxle

ゲームを始めるには、下記サイトにアクセスします。
最初にルールが表示され、「Start Playing!」をクリックすると始まります。

flexboxle

Flexboxのパズルは5-10個のブロックで構成されており、日ごとに問題が変わるようです。

Flexboxをマスターするためのクイズ

Flexboxを使用して、「Start」の配置を「Goal」と同じ配置にします。
単にFlexboxを使うだけでなく、すこしひねりというか、ひらめきも必要な問題になっています。

「Start」の配置を「Goal」と同じ配置にする

コードは、CSSとTailwindの2種類に対応しています。どちらのコードで記述しても、もう一方に自動で反映されます。

CSSの初期コード

タブをクリックすると、Tailwind CSSに切り替わります。
flexboxleはFlexboxのクイズですが、Tailwindを学ぶのにもいいですね。

Tailwind CSSの初期コード

Flexboxの各プロパティについて迷ったら、下記を参考にどうぞ。各プロパティの値をどうすれば期待通りに配置されるかイラスト付きなので、分かりやすいと思います。

CSS Flexbox 各プロパティの使い方を詳しく解説

この問題のポイントは、どうやって2行にするかです。複数行に配置するflex-wrap: wrap;はすでに記述されています。すこし考えましたが、display: flex;を入れ子にするのを思いつきました。

Flexboxを入れ子にしてみた

これで2行に配置されたので、あとはgapですき間を設定しました。

アイテム間のすき間を設定

コードが完成したら、「Submit」をクリックすると、結果が表示されます。

クイズの結果

今回の問題で正解になったコードは、下記の通りです。

Tailwind CSSのコードは、自動で生成されます。