今回の課題

3つのカードを横よこに並ならべよう！ .container に display: flex を追加ついかしてね。

📖 解説を見る

↔️ Flexboxで横よこに並ならべよう！

Flexboxは要素ようそを簡単かんたんに横並よこならびにできるCSSの機能きのうです。

✏️ 使つかい方かた：

.container {
  display: flex;　← これだけで横並び！
  gap: 10px;　← 間あいだのスペース
}

⚠️ ポイント：
・親おやの要素ようそに display: flex を設定せっていする
・justify-content: center で中央ちゅうおう揃そろえ
・gap で子こどもの間隔かんかくを設定せっていできる

ヒントを見る

style.css の .container に display: flex; と gap: 12px; を書こう！

📄 見本

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

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

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

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

未挑戦

問題 1: justify-content: center でカードを中央ちゅうおうに揃そろえよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: flex-direction: column で縦たてに並ならべてみよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: カードを5つにして、自由じゆうにスタイルをアレンジしよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト5：横に並べよう！