今回の課題

3つのボックスを横に並べよう！（display: flex を使ってね）

📖 解説を見る

📐 Flexboxで横並びレイアウト！

display: flex を使うと子要素を横に並べられるよ！

.container {
  display: flex;
}

ヒントを見る

.container に display: flex; を追加しよう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: ボックスの間に gap: 10px を追加しよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: flex-direction: column を追加して縦並びにしよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: flex-wrap: wrap を追加してみよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト26：Flexboxで横並び