web-dev-qa-db-ja.com

Flexboxが要素に等しい幅を与えない

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

Fiddle

これをモデル化しているチュートリアルは 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>
htmlcsshtml5css3flexbox
276
itsclarke

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

スペック ：から

指定されたフレックス基準が自動の場合、使用されるフレックス基準はフレックスアイテムのメインサイズプロパティの値です。 （これ自体がキーワードautoであり、その内容に基づいてフレックスアイテムのサイズを変更します。）

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

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

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

スペックからのこの図 は、ポイントを説明するのにかなり良い仕事をします。

そして これは実用的な例です あなたのいじるのは/です。

700
James Montagne

Flexを使用して同じ幅の要素を作成するには、自分の子供（flex要素）に設定する必要があります。

flex-basis: 25%;
flex-grow: 0;

幅25％の行のすべての要素に与えられます。彼らは成長せず、一つずつ行きます。

7
alexJS