📝

【HTMLCSS】フレックスコンテナを作るときの注意点

に公開
CSS
HTML
tech

JumpCode(サイト模写サイト)で模写をしている際に勉強したこと

✅フレックスは「1段構成 or ラップ」で整理すると◎

以下のようにレイアウトが少し複雑になるときはラップを推奨

hmtl

<header id="header">
    <div class="header-inner"> <!--divでラップ -->
        <h1>...</h1>
        <nav>...</nav>
        <div id="toggle-btn">...</div>
    </div>
</header>

.header-inner に display: flex; を指定すると、
将来レスポンシブで nav 隠したり toggle-btn 出す切り替えにも対応しやすくなります。

💡なぜラップするのか
レスポンシブ対応で「ナビを非表示にしてハンバーガーを出す」とか「全体に背景をつける」
といった操作をするとき、header自体にいろんな役割が混ざってしまいスタイルがごちゃつくから。

💡header と .header-inner を分けると
・header→ページ全体での役割（セマンティクス・背景色・余白など外側の装飾）
・.header-inner→中身の横並び制御
役割がはっきりしてスタイルがごちゃつかない。

🧠イメージ
・header = 建物の外壁
・.header-inner = 部屋の間取り
外壁に全部詰め込むより、間取りを作ったほうが住みやすい（メンテしやすい）って感じ

Discussion