Flexbox nicht zu geben, gleich Breite Elemente

Versuch, einen flexbox-nav, die bis zu 5 Elemente und so wenig wie 3, aber es ist nicht die Aufteilung der Breite gleichmäßig zwischen allen Elementen.

Fiddle

Tutorial ich bin Modellierung dieser nach ist http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS

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: "";
}

HTML:

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

InformationsquelleAutor itsclarke | 2014-07-31
  1. 740

    Es ist eine wichtige bit, das ist nicht erwähnt in dem Artikel, auf die Sie verknüpft, und das ist flex-basis. Standardmäßig flex-basis ist auto.

    Vom die Skillung:

    Wenn der angegebene flex-basis ist auto, das verwendete flex-basis ist der Wert der flex-Element das Haupt-size-Eigenschaft. (Dieser kann selbst das Stichwort auto, welche Größen die flex-Element basierend auf seinem Inhalt.)

    Jeder flex-Element hat einen flex-basis was so ähnlich ist wie seine ursprüngliche Größe. Dann von dort aus, wird das Verbleibende freie Speicherplatz wird proportional verteilt (basierend auf flex-grow) unter den Artikel. Mit auto, die basis ist der Inhalt Größe (oder definierter Größe mit width usw.). Als Ergebnis, werden Elemente mit größerem text in gegeben sind, mehr Platz insgesamt in deinem Beispiel.

    Wenn Sie möchten, dass Ihre Elemente werden komplett selbst, können Sie flex-basis: 0. Damit wird der flex-basis zu 0 und dann alle verbleibenden Platz (die werden alle Platz, da alle basises sind 0), werden proportional verteilt, basierend auf flex-grow.

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

    Dieses Diagramm aus der spec hat einen ziemlich guten job der Darstellung der Punkt.

    Und hier ist ein funktionierendes Beispiel mit Ihrer Geige.

    • Diese Ruinen Verpackung für mich auf Safari.
    • Das ehrfürchtige Sache über dieser Antwort ist, dass Sie erklären, flex-basis mit diesem Beispiel besser als überall sonst auf der buchstäblich das gesamte internet. Ich werde Kontakt MIT über geben Sie eine honorarprofessur.
    • Nur zu erwähnen, dass flex: 1; ist die Kurzform für die Kombination von flex-grow: 1, flex-basis: 0.
    • Nur für den Fall, wenn jemand will, um zu wissen, in der Tiefe, stieß ich auf diesen tollen Artikel im web: css-tricks.com/flex-grow-is-weird
    • Oh Mann, immer schlägt mir auf den Kopf, wenn ich dachte, ich packte CSS.
    • Wenn dies nicht für Sie arbeiten, überprüfen Sie, ob ein Element hat verschiedene horizontale Polsterung als der andere, dann ist diese Lösung nicht die gleiche Breite.

    InformationsquelleAutor James Montagne
  2. 9

    Erstellen, Elemente mit gleicher Breite mit Flex ist, sollten Sie Ihrem Kind (flex-Elemente):

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

    Wird es geben, um alle Elemente in der Zeile 25% Breite. Sie wachsen nicht mehr und gehen eins nach dem anderen.

    • Das ist ziemlich umständlich, da es verringert sich der Vorteil der flex-vollständig. Wenn du gehst zu fest Ihre Spalte Größen, es gibt vielleicht einfachere Wege, Dinge zu lösen.
    • das ist nicht falsch .. wenn Sie wollen, haben Boxen mit gleicher Länge und breaken nach unten, wenn eine Reihe voll besetzt ist .. Sie kann leicht erreichen wie diese. Vielleicht legen Sie auch min-width, wenn Sie benötigen eine min-width
    • Du sagst, dass wie es ist der einzige Vorteil, den flexboxes... man kann Sie sicherlich noch von Vorteil sein, wenn Sie Sie brauchen, gleich breiten, z.B. für die Reaktionsfähigkeit. Auch ist es nicht wie flexboxes nicht einfach?
    InformationsquelleAutor alexJS
Schreibe einen Kommentar