やりたいこと
CSSのdisplay: "flex"の動作を知りたい
ソース例
このソースの例は、ReactとAntDesignというフレームワークで、以下写真のような画面のヘッダーを作成している
ソースはAntDesignの公式ドキュメントから改修したものである
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,
}}
/>
画面がこうなりました!
ちなみに、「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,
}}
/>
でも、以下のように、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エンジニアとしてスキルを向上できるかな、と今回改めて思いました!
参考サイト
こちらのサイトをみて大変勉強になったのでありがとうございます!