Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ チャレンジ:Flexboxで縦型ブログカードを作成する | Flexboxによるモダンレイアウト
CSSの基礎

bookチャレンジ:Flexboxで縦型ブログカードを作成する

メニューを表示するにはスワイプしてください

ブログカードの作成。flexを利用してデフォルトの配置動作を変更。

課題内容:

  • 投稿画像(imgクラス名のpost-imageタグ)と投稿情報(divクラス名のpost-infoタグ)の両方を含む親要素を特定。
  • 親要素(divクラス名のblog-cardタグ)にflexプロパティを適用。
  • カード内のアイテムを水平方向に中央揃え。
  • アイテムがカード全体の高さをカバーするように設定。
index.html

index.html

index.css

index.css

copy
  • display: flex; は親要素のみに適用可能。
  • デフォルトのフレックス方向は row のため、flex-direction: column; プロパティで変更が必要。
  • アイテムを水平方向に中央揃えするには、align-items: center; を使用。
  • アイテムを垂直方向に間隔を空けるには、justify-content: space-between; を使用。
index.html

index.html

index.css

index.css

copy
すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 4.  7

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 4.  7
some-alt