Flexbox nie daje równej szerokości elementom


368

Próba nawigacji flexbox, która ma do 5 elementów i tylko 3, ale nie dzieli jednakowej szerokości między wszystkie elementy.

Skrzypce

Samouczek, po którym modeluję to: 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>


1
podaj minimalną szerokość stołu jak i ustaw wypełnianie za pomocą jednostek vw może pomóc: jsfiddle.net/2nY9N/2 upuść flex-grow i po prostu wykonaj flex: 1; użyje defaut wartości dla 2 innych właściwości
G-Cyrillus

Odpowiedzi:


907

Jest ważny element, który nie jest wspomniany w artykule, z którym się łączyłeś, i to jest flex-basis. Domyślnie flex-basisjest auto.

Ze specyfikacji :

Jeśli określona podstawa elastyczności jest automatyczna, zastosowana podstawa elastyczności jest wartością głównej właściwości rozmiaru elementu elastyczności. (Może to być samo słowo kluczowe auto, które określa rozmiar elementu flex na podstawie jego zawartości).

Każdy element flex ma flex-basiscoś w rodzaju swojego początkowego rozmiaru. Następnie stamtąd pozostała wolna przestrzeń jest rozdzielana proporcjonalnie (na podstawie flex-grow) między przedmioty. Z autotą podstawą jest rozmiar zawartości (lub zdefiniowany rozmiar za pomocą width, itp.). W rezultacie elementy z większym tekstem mają więcej miejsca w twoim przykładzie.

Jeśli chcesz, aby twoje elementy były całkowicie równe, możesz ustawić flex-basis: 0. Spowoduje to ustawienie podstawy elastyczności na 0, a następnie pozostała przestrzeń (która będzie całą przestrzenią, ponieważ wszystkie podstawy są równe 0) zostanie proporcjonalnie rozdzielona na podstawie flex-grow.

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

Ten diagram ze specyfikacji całkiem dobrze ilustruje ten punkt.

A oto działający przykład ze skrzypcami.


3
To wszystko zawodzi dla mnie w Safari.
Bałwan

77
Niesamowitą rzeczą w tej odpowiedzi jest to, że wyjaśniasz model flex-base w tym przykładzie lepiej niż gdziekolwiek indziej dosłownie w całym Internecie. Skontaktuję się z MIT w sprawie uzyskania profesury honorowej.
dudewad

96
Wystarczy wspomnieć, że flex: 1;jest skrótem dla kombinacji flex-grow: 1, flex-basis: 0.
Vadim Ovchinnikov

1
Na wszelki wypadek, jeśli ktoś chce się dowiedzieć dogłębnie, natknąłem się na ten świetny artykuł w Internecie: css-tricks.com/flex-grow-is-weird
Kuldeep Kumar

O rany, zawsze uderza mnie w głowę, kiedy myślałem, że zrozumiałem CSS.
ibic,

15

Aby utworzyć elementy o równej szerokości za pomocą Flex, należy ustawić na dziecko (elementy elastyczne):

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

Daje wszystkim elementom w rzędzie szerokość 25%. Nie będą rosły i odchodziły jeden po drugim.


77
Jest to dość niewygodne, ponieważ całkowicie zmniejsza korzyść z elastyczności. Jeśli zamierzasz na stałe zakodować swoje rozmiary kolumn, istnieją łatwiejsze sposoby rozwiązania tego problemu.
Kloar,

3
to wcale nie jest złe ... jeśli chcesz mieć pudełka o tej samej długości i rozkładane, gdy rząd jest w pełni zajęty .. możesz to łatwo osiągnąć w ten sposób. Może ustaw także minimalną szerokość, jeśli potrzebujesz minimalnej szerokości
Ilario Engler

1
@Kloar Mówisz, że to jedyna zaleta Flexboksa ... Z pewnością mogą być korzystne, gdy potrzebujesz równych szerokości, np. W celu szybkiego reagowania. Czy to nie tak, że Flexboksy nie są łatwe?
user2999349,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.