会員登録すると
学習することができます。
会員登録する（無料）
学習することができます。
登録済みの方はこちら
ログイン
Flexboxでレイアウトを組もう
目安学習時間 18分
学ぶ目的
現代のレイアウトはFlexboxが基本
要素を横に並べる・中央に寄せるといった配置は、親要素にdisplay: flexを指定するFlexboxで実現するのが現在の標準です。
2つの軸で考える
Flexboxは主軸（justify-content）と交差軸（align-items）の2つの軸で配置を制御します。「横方向は等間隔、縦方向は中央」のような指定が1〜2行で書けます。
学ぶ目的
ヘッダーのナビゲーションやカードの横並びなど、実際のWebページで頻出するレイアウトパターンを自分で組めるようになります。
このレクチャーで学ぶこと
- display: flexの基本
- 横並び・中央寄せの作り方
- justify-contentとalign-items
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
理解度チェックテストに
合格しました！
おめでとうございます！
HTML/CSS初級
HTML/CSS初級講座
Flexboxでレイアウトを組もう
理解度チェックテストに合格しました！
＼ SNSにシェアする ／
