Flexbox

Flexboxは、複数要素を横または縦の一方向に並べ、間隔や位置を調整するレイアウト機能です。

このLessonのゴール

• display: flexで子要素を横並びにできる
• justify-contentとalign-itemsで配置を調整できる
• gapを使って要素同士の間隔を揃えられる

今回新しく作るファイル

with-cafe/practice/css/
├── 03-flexbox.html
└── 03-flexbox.css

03-flexbox.htmlから03-flexbox.cssを読み込みます。前のLessonのファイルは上書きせず、比較できる状態で残します。

<link rel="stylesheet" href="../../css/reset.css" />
<link rel="stylesheet" href="03-flexbox.css" />

ブラウザで確認するファイル

03-flexbox.htmlをブラウザで開きます。03-flexbox.cssだけをブラウザで開いても、完成したヘッダーの見た目は確認できません。

まず、ロゴとナビゲーションを持つHTMLを作ります。

<header class="header">
  <a class="logo" href="#top">With Café</a>
  <nav aria-label="メインナビゲーション">
    <ul class="navigation">
      <>私たちについて
      メニュー
      店舗情報