ヘッダーの項目を、3つは左側に中央揃え、1つは右端に配置したい

Question

HTMLとCSSで商品販売サイトを制作しています。
ヘッダーを以下のようにしたいです。
カートの文言を右端にして、余った幅でTOP、カテゴリー、店舗情報の３項目を中央配置したいです。
どのようにCSSを書けば良いかわかりません、教えていただければと思います。
よろしくお願いします。

「　　　TOP カテゴリー　店舗情報　　　カート」

<ul>
    <li><a>TOP</a></li>
    <li><a>カテゴリー</a></li>
    <li><a>店舗情報</a></li>
</ul>
<div><a>カート</a></div>

Answer 1

Flexboxなら下記のような感じかな。

<header>
  <ul>
    <li><a>TOP</a></li>
    <li><a>カテゴリー</a></li>
    <li><a>店舗情報</a></li>
  </ul>
  <div><a>カート</a></div>
</header>

header {
  display: flex;
  justify-content: space-between;
}
header ul {
  display: flex;
  justify-content:center;
  width: 100%;
  list-style: none;
  padding: 0;
  gap: 20px; /* お好みで調整 */
}
header div {
  flex-shrink: 0;
}

Comments

[harmonychild]

できました、flex-shrinkを使うという発想はありませんでした。
ありがとうございました！

Answer 2

サンプルコード

• デモ（JSFiddle）

<div class="container">
  <ul>
    <li>
      <a>TOP</a>
    </li>

    <li>
      <a>カテゴリー</a>
    </li>

    <li>
      <a>店舗情報</a>
    </li>
  </ul>

  <div>
    <a>カート</a>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 80px;
}

.container ul {
  display: flex;
  justify-content: space-evenly;
  margin: 0;
  padding: 0;
  list-style: none;
}

参考URL

• 独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル | コリス
• 5分で完璧に分かる！CSS Gridの基本的な使い方を解説 | コリス

Comments

[harmonychild]

できました、ありがとうございます！

Answer 3

カートの幅がきめられるならulの方は残りを指定できます
あとは全体をラップしてflexすればよいでしょう