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

368

最大5アイテム、最小3アイテムのフレックスボックスナビゲーションを試みますが、すべての要素間で幅を均等に分割していません。

フィドル

私がこれからモデリングしているチュートリアルはhttp://www.sitepoint.com/sensitive-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>

スニペットを展開

html css flexbox

— そのクラーク
ソース

のようにテーブルに最小幅を与え、vwユニットでパディングを設定すると役立つかもしれません：jsfiddle.net/2nY9N/2フレックス成長をドロップすると、ちょうどフレックスの操作を行います。1。他の2つのプロパティにはデフォルト値を使用します

— G-Cyrillus

フレックスボックスを使用して均等に分割する方法の

— Gajus

回答:

907

あなたがリンクした記事に記載されていない重要なビットがありますflex-basis。デフォルトflex-basisはautoです。

スペックから：

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

各flexアイテムには、flex-basis初期サイズに似たのがあります。そこから、残りの空き領域が（に基づいてflex-grow）アイテムに比例して配分されます。ではauto、その基準はコンテンツのサイズ（またはで定義されたサイズwidthなど）です。その結果、大きなテキストが含まれるアイテムには、例全体でより多くのスペースが与えられます。

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

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

仕様のこの図は、要点を説明するのに非常に優れています。

そして、これがあなたのフィドルを使った実用的な例です。

— ジェームズモンターニュ
ソース

これはSafariでのラッピングを台無しにします。

— スノーマン

この回答のすばらしい点は、文字通りインターネット全体の他のどの場所よりも、この例を使用してフレックスベースをよりよく説明できることです。名誉教授になることについてMITに連絡します。

— dudewad

ただ、言及するflex: 1;の組み合わせの省略形ですflex-grow: 1、flex-basis: 0。

— Vadim Ovchinnikov

誰かが詳細を知りたい場合に備えて、私はこのすばらしい記事をウェブ上で見つけ

— Kuldeep Kumar

ああ、CSSを掴んだと思ったときはいつも頭を殴られました。

— ibic 2007

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

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

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

— alexJS
ソース

これはflexの利点を完全に損なうため、かなり厄介です。列のサイズをハードコードする場合は、問題を解決する簡単な方法があります。

— Kloar

それはまったく間違っていません..同じ長さのボックスがあり、行が完全に占有されているときに分割したい場合は、このように簡単に達成できます。最小幅が必要な場合は、おそらく最小幅も設定してください

— Ilario Engler

@Kloarそれはフレックスボックスの唯一の利点であるようにあなたは言っています...例えば応答性など、同じ幅が必要な場合にも確かにそれらは確かに有益である可能性があります。また、フレックスボックスは簡単ではないのではないですか？

— user2999349 2017