☰

Flexbox が要素に均等な幅を与えない 質問する

tag-icon • tag-icon html css flexbox
Flexbox が要素に均等な幅を与えない 質問する

最大 5 個、最小 3 個の項目を持つ flexbox ナビゲーションを試みていますが、すべての要素間で幅が均等に分割されていません。

フィドル

私がこれをモデルにしているチュートリアルはhttp://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

* {
  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>

ベストアンサー1

リンク先の記事には記載されていない重要な点がありますflex-basis。それは です。デフォルトではflex-basisですauto。

からスペック:

指定された flex-basis が auto の場合、使用される flex 基準は、flex アイテムのメインのサイズ プロパティの値です。(これ自体は、flex アイテムのサイズをその内容に基づいて決定するキーワード auto にすることができます。)

各フレックス アイテムには があり、flex-basisこれは初期サイズに似ています。そこから、残りの空きスペースは に基づいてflex-growアイテム間で比例配分されます。 の場合auto、その基準はコンテンツのサイズ (またはwidthなどで定義されたサイズ) です。その結果、例では、内部に大きいテキストがあるアイテムには全体的に多くのスペースが与えられます。

要素を完全に均等にしたい場合は、 を設定できますflex-basis: 0。これにより、フレックス ベースが 0 に設定され、残りのスペース (すべてのベースが 0 なので、すべてスペースになります) は に基づいて比例配分されますflex-grow。

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

仕様書からのこの図この点を非常にうまく説明しています。

そしてここに実際の例がありますあなたのバイオリンで。

おすすめ記事