やりたいこと

CSSのdisplay: "flex"の動作を知りたい

ソース例

このソースの例は、ReactとAntDesignというフレームワークで、以下写真のような画面のヘッダーを作成している
ソースはAntDesignの公式ドキュメントから改修したものである

qiita.rb

import React from "react";
import { Outlet, useNavigate } from "react-router-dom";
import {
  LaptopOutlined,
  NotificationOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme } from "antd";

const { Header, Content, Footer, Sider } = Layout;

const headerItems = ["ホーム", "つながり", "メッセージ", "お知らせ"].map(
  (key) => ({
    key,
    label: `${key}`,
  })
);

const App = () => {
  const { token } = theme.useToken();
  return (
    <Layout>
    {/* ここを注目 */}
      <Header
        style={{
          display: "flex",
          alignItems: "center",
        }}
      >
      {/* ここを注目 */}
        <div
          className="demo-logo"
          style={{
            minWidth: 0,
            color: 'white',
          }}
        >
          logologo
        </div>
        {/* ここを注目 */}
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["1"]}
          items={headerItems}
          style={{
            flex: 1,
            minWidth: 0,
          }}
        />
      </Header>
      <Layout
        style={{
          padding: "24px 48px",
          // background: token.colorBgContainer,
          // borderRadius: token.borderRadiusLG,
        }}
      >

      </Layout>

      <Footer
        style={{
          textAlign: "center",
        }}
      >
        Ant Design ©{new Date().getFullYear()} Created by curlneko
      </Footer>
    </Layout>
  );
};
export default App;

そこで、ヘッダーの両要素「ロゴ」と「ナビゲーションバー」の位置がなぜこうなっていたか？その比率がどう決めたか？気になったので、いろいろ調べました。

ルートにdisplay: "flex"を定義しないと、子要素がblockとして表示され、縦並びになる

ルート要素のHeaderにあるdisplay: "flex"をコメントアウトすると、子要素にあるflex: 1が聞かなくなり、子要素がデフォルトでdisplay: "block"の表示になるので、「縦並び」になる。

子要素に対して、flex: 1とかの設定をしたい場合、ルート要素のほうにdisplay: "flex"の設定が必須である！

画像は「株式会社アーティス社」のサイトから（URLは参考サイトを参照）

以下のところをコメントアウトしてみると

<Header
    style={{
      {/* display: "flex", */}
      alignItems: "center",
    }}
  >

あれっ、なんで「ナビゲーションバー」の表示がなくなったのか？って最初私がよく理解できないが。。。

調べた結果、なくなったわけではなく、縦並びになっただけです。
しかし、いま使っているAntDesignは、ヘッダーに対して縦の高さを設けたので、表示しきれずに隠されてしまった。

flex: 1は同じ階層にいる要素同士の表示の割合

本来二つの子要素に、「menu（ナビゲーションバー）」にしかflexを設定していないので、あまり割合感が見えないですが、

「div（ログ）」に対しても、flex: 1を設定してみると

<div
  className="demo-logo"
  style={{
    flex: 1,{/* ここを追加 */}
    minWidth: 0,
    color: 'white',
  }}
>
  logologo
</div>
<Menu
  theme="dark"
  mode="horizontal"
  defaultSelectedKeys={["1"]}
  items={headerItems}
  style={{
    flex: 1,
    minWidth: 0,
  }}
/>

画面がこうなりました！

ちょうど1:1の割合ですね

ちなみに、「menu（ナビゲーションバー）」に flex: 2に修正すると、1:2になりました

要素の中身が大きすぎた場合、表示が途中で切れてしまう

「div（ログ）」に対し、英字でa~jを10個ずつ入れたが

<div
  className="demo-logo"
  style={{
    flex: 1,{/* ここを追加 */}
    minWidth: 0,
    color: 'white',
  }}
>
  aaaaaaaaaabbbbbbbbbbccccccccccddddddddddeeeeeeeeeeffffffffffgggggggggghhhhhhhhhhiiiiiiiiiijjjjjjjjjj
</div>
<Menu
  theme="dark"
  mode="horizontal"
  defaultSelectedKeys={["1"]}
  items={headerItems}
  style={{
    flex: 2,
    minWidth: 0,
  }}
/>

表示が途中のiで切れてしまった

でも、以下のように、50音順で「あ～を」を入れてみると

<div
  className="demo-logo"
  style={{
    flex: 1,{/* ここを追加 */}
    minWidth: 0,
    color: 'white',
  }}
>
  あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわを
</div>
<Menu
  theme="dark"
  mode="horizontal"
  defaultSelectedKeys={["1"]}
  items={headerItems}
  style={{
    flex: 2,
    minWidth: 0,
  }}
/>

日本語の要素を入れる場合は、改行表示になるね。。。

終わりに

今回はCSSの表示設定を勉強しました。

普段はCSSフレームワークばっかり使って、便利は便利ですが、CSS本来の書き方や意味合いを理解する機会がなくなってしまった。

なぜこんな感じで表示されているかを理解しづつ、フレームワークの利便性を活用したほうが、より自身のWebエンジニアとしてスキルを向上できるかな、と今回改めて思いました！

参考サイト

こちらのサイトをみて大変勉強になったのでありがとうございます！