Flexbox, die Elementen nicht die gleiche Breite verleiht

368

Versuchen Sie es mit einem Flexbox-Navi, das bis zu 5 Elemente und nur 3 Elemente enthält, aber die Breite nicht gleichmäßig auf alle Elemente verteilt.

Geige

Das Tutorial, nach dem ich dies modelliere, ist 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>

itsclarke
quelle
1
Geben Sie Ihrem Tisch eine minimale Breite wie und stellen Sie die Polsterung mit vw-Einheiten ein. Dies kann hilfreich sein: jsfiddle.net/2nY9N/2 Lassen Sie das Flex-Grow fallen und machen Sie einfach Flex: 1; Es werden defaut Werte für die 2 anderen Eigenschaften verwendet
G-Cyrillus

Antworten:

907

Es gibt ein wichtiges Bit, das in dem Artikel, auf den Sie verlinkt haben, nicht erwähnt wird flex-basis. Standardmäßig flex-basisist auto.

Aus der Spezifikation :

Wenn die angegebene Flex-Basis automatisch ist, ist die verwendete Flex-Basis der Wert der Hauptgrößeneigenschaft des Flex-Elements. (Dies kann selbst das Schlüsselwort auto sein, das die Größe des Flex-Elements basierend auf seinem Inhalt ändert.)

Jedes Flex-Element hat eine flex-basisGröße, die seiner ursprünglichen Größe entspricht. Von dort aus wird der verbleibende freie Speicherplatz proportional (basierend auf flex-grow) auf die Elemente verteilt. Diese autoBasis ist die Inhaltsgröße (oder die definierte Größe mit widthusw.). Infolgedessen erhalten Elemente mit größerem Text in Ihrem Beispiel insgesamt mehr Platz.

Wenn Sie möchten, dass Ihre Elemente vollständig gleichmäßig sind, können Sie festlegen flex-basis: 0. Dies setzt die Flex-Basis auf 0 und dann wird jeder verbleibende Raum (der der gesamte Raum ist, da alle Basen 0 sind) proportional basierend auf verteilt flex-grow.

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

Dieses Diagramm aus der Spezifikation veranschaulicht den Punkt ziemlich gut.

Und hier ist ein Arbeitsbeispiel mit Ihrer Geige.

James Montagne
quelle
3
Diese Ruinen wickeln sich für mich auf Safari ein.
Schneemann
77
Das Tolle an dieser Antwort ist, dass Sie die Flex-Basis mit diesem Beispiel besser als irgendwo anders im gesamten Internet erklären. Ich werde mich mit dem MIT in Verbindung setzen, um Ihnen eine Ehrenprofessur zu verleihen.
Dudewad
96
Nur um zu erwähnen, dass dies flex: 1;eine Abkürzung für die Kombination von flex-grow: 1, flex-basis: 0.
Vadim Ovchinnikov
1
Nur für den Fall, dass jemand etwas genauer
Kuldeep Kumar
Oh Mann, trifft mich immer auf den Kopf, wenn ich dachte, ich hätte CSS verstanden.
Ibic
15

Um Elemente mit gleicher Breite mit zu erstellen Flex, sollten Sie das untergeordnete Element Ihres Elements festlegen (flexible Elemente):

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

Es gibt allen Elementen in Zeile 25% Breite. Sie werden nicht wachsen und eins nach dem anderen gehen.

alexJS
quelle
77
Dies ist ziemlich umständlich, da es den Vorteil von Flex vollständig verringert. Wenn Sie Ihre Spaltengrößen fest codieren möchten, gibt es einfachere Möglichkeiten, Probleme zu lösen.
Kloar
3
Das ist überhaupt nicht falsch. Wenn Sie Boxen mit der gleichen Länge haben und zusammenbrechen möchten, wenn die Reihe voll belegt ist, können Sie dies auf einfache Weise erreichen. Vielleicht auch min-width einstellen, wenn Sie eine min width benötigen
Ilario Engler
1
@Kloar Sie sagen, dass dies der einzige Vorteil von Flexboxen ist ... Sie können sicherlich immer noch von Vorteil sein, wenn Sie gleiche Breiten benötigen, z. B. für die Reaktionsfähigkeit. Auch ist es nicht so, dass Flexboxen nicht einfach sind?
user2999349