フレックスレイアウトとposition:absolute/fixedの競合の詳細な説明

以前、プロジェクトを開発しているときに、flex レイアウトと position:absolute/fixed の競合という問題に遭遇しました。その後、私は解決策を思いつきました。今日はそれを皆さんと共有したいと思います。

プロジェクトの実践:

ここで、上部にナビゲーションバーを作成し、それを上部に固定するために fixed を使用し、内部スタイルを設定するために Flexible Box レイアウトを使用したいのですが、Flexible Box レイアウトが失敗したことがわかりました。

HTML コードは次のとおりです。

<ul>
    <li>協会について</li>
    <li>協会憲章</li>
    <li>協会構造</li>
    <li>ダウンロード</li>
</ul>

CSS コードは次のとおりです。

ul {
	位置: 固定;
  	ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    マージン: 0 15px;
    背景: ピンク;
}
li {
    フレックス: 1;
    リストスタイル: なし;
    高さ: 100px;
    行の高さ: 100px;
    テキスト配置: 中央;
    フォントサイズ: 30px;
    境界線: 1px 実線 #fff;
}

効果は以下のとおりです。

フレキシブルボックスレイアウトが失敗したことがわかりました。この問題をどのように解決すればよいでしょうか?
実はとても簡単です。ul の外側に別のボックスを配置するだけです。次に外側のボックスを配置し、内側のボックスをフレックスボックスを使用して通常どおりレイアウトします。

変更後の HTML コードは次のとおりです。

<div class="nav-box">    
    <ul>
        <li>協会について</li>
        <li>協会憲章</li>
        <li>協会構造</li>
        <li>ダウンロード</li>
    </ul>
</div>

変更後の CSS コードは次のとおりです。

.nav-box {
    幅: 100%;
    位置: 固定; 
}
ul {
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    マージン: 0 15px;
    背景: ピンク;
}
li {
    フレックス: 1;
    リストスタイル: なし;
    高さ: 100px;
    行の高さ: 100px;
    テキスト配置: 中央;
    フォントサイズ: 30px;
    境界線: 1px 実線 #fff;
}

この時点で問題は解決されたことがわかりました。

flexレイアウトとposition:absolute/fixedの競合に関する記事はこれで終わりです。flexとposition:absolute/fixedの競合についての詳細は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: Web開発で使用される基本的な概念と技術の紹介

>>: MySQL インデックスプッシュダウンを 5 分で学ぶ