wake-up-neo.com

Flexbox Elementen nicht die gleiche Breite geben

Beim Versuch, ein flexbox -Navigationssystem mit bis zu 5 Elementen und nur 3 Elementen zu verwenden, wird die Breite jedoch nicht gleichmäßig auf alle Elemente aufgeteilt.

Geige

Das Tutorial, nach dem ich das 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>
htmlcsshtml5css3flexbox
299
itsclarke

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

Von die Spezifikation :

Wenn die angegebene Flex-Basis auto 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 bestimmt.)

Jedes Flex-Item hat einen flex-basis, der in etwa seiner ursprünglichen Größe entspricht. Von dort aus wird der verbleibende freie Speicherplatz proportional (basierend auf flex-grow) auf die Elemente verteilt. Mit auto ist diese Basis die Inhaltsgröße (oder definierte Größe mit width usw.). 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 flex-basis: 0 einstellen. Dadurch wird die Flex-Basis auf 0 gesetzt, und dann wird der verbleibende Speicherplatz (der gesamte Speicherplatz, da alle Basiswerte 0 sind) proportional auf der Grundlage von flex-grow verteilt.

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

Dieses Diagramm aus der Spezifikation macht einen ziemlich guten Job, um den Punkt zu veranschaulichen.

Und hier ist ein Arbeitsbeispiel mit Ihrer Geige.

754
James Montagne

Um mit Flex Elemente mit gleicher Breite zu erstellen, müssen Sie das untergeordnete Element (Flex-Elemente) festlegen:

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

Alle Elemente in der Reihe erhalten eine Breite von 25%. Sie werden nicht wachsen und eins nach dem anderen gehen.

9
alexJS