CSS Flexbox ナビゲーションバー - 左にロゴ、右にリンク
CSS フレックスボックス レイアウトを視覚的に構築します。フレックス方向、コンテンツの位置調整、項目の配置、コンテナ上のフレックスラップとギャップに加え、子ごとのフレックスグロー、フレックスシュリンク、フレックスベースをすべてライブプレビューとコピー可能な CSS で実行できます。
結果
このページでは、クラシック ナビゲーション バー レイアウトにプリセットされたフレックスボックス ジェネレーターが開きます。justify-content が space-between に設定され、align-items が center に設定されます。最初のボックスにロゴを配置し、最後のボックスにナビゲーション リンクの行を配置します (または、リンクを中央のボックスに分割します)。フレックスボックス コンテナーは、ロゴやリンク テキストの高さに関係なく、すべての項目を同じ垂直方向の中央に並べたまま、それらをバーの両端に押し込みます。
これを機能させるのは space-between です。最初の子を開始エッジに固定し、最後の子を終了エッジに固定し、残りの子をそれらの間に均等に配置します。まさに、ほぼすべてのサイト ヘッダーで使用される左ロゴ、右リンクの形状です。 align-items: center は、行の高さのハックやテーブル セルの表示トリックが必要だった垂直方向の配置を解決します。
実際のナビゲーションバーに合わせて子の数を調整します (ロゴと CTA のみのバーの場合は 2 つのボックス、ロゴといくつかのリンクの場合はさらに多くのボックス) で、レイアウトがライブで適応するのを確認します。ヘッダーと一致したら CSS ブロックをコピーするか、その 1 つのプロパティをその近縁のものと比較して確認したい場合は、スペース間のプリセットを開きます。