BinaryDevelop
  1. ホーム
  2. html

[解決済み] フレックスボックスが要素に等しい幅を与えない

2022-03-20 15:18:43

質問

最大5項目、最小3項目のフレックスボックスナビゲーションを試みているが、すべての要素で幅が均等に分割されない。

フィドル

このチュートリアルのモデルになっているのは http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS 

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

解決方法は？

リンク先の記事には書かれていない重要な部分があり、それは flex-basis . デフォルトでは flex-basis は auto .

から 仕様書 :

flex-basis が auto の場合、使用される flex basis はフレックスアイテムの main size 特性の値である。(これはそれ自体がキーワード auto である場合もあり、フレックスアイテムの内容に基づいてサイズを決定します)。

各フレックスアイテムには flex-basis これは初期サイズのようなものです。 そして、そこから残りの空きスペースは、比例配分されます。 flex-grow というように とは auto の場合、その基準はコンテンツサイズ（または、定義されたサイズ）です。 width など）。 その結果、あなたの例では、中のテキストが大きい項目は、全体としてより多くのスペースが与えられています。

要素を完全に均等にしたい場合は flex-basis: 0 . これはフレックスの基底を0に設定し、残りのスペース（すべての基底が0なのですべてのスペースとなります）は、以下の基準で比例配分されます。 flex-grow . 

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

この図は仕様書から は、この点をかなりうまく説明しています。

そして 以下は動作例です。 をあなたのフィドルで演奏してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します