Flexbox не дає рівній ширині елементам


368

Спроба флешбоку нав, який містить до 5 елементів і всього 3, але це не ділення ширини однаково між усіма елементами.

Скрипка

Підручник, який я моделюю після цього, є 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
надати мінімальну ширину вашому столу, як-от, і встановити набивання за допомогою vw-одиниць може допомогти: jsfiddle.net/2nY9N/2 знизить flex-зростання і просто зробіть flex: 1; він використовуватиме значення дефолту для двох інших властивостей
G-Cyrillus

Відповіді:


907

Є важливий біт, який не згадується в статті, з якою ви пов’язали, і це flex-basis. За замовчуванням flex-basisє auto.

З специфікації :

Якщо зазначена flex-основа є автоматичною, використовувана flex основа є значенням властивості основного елемента flex. (Це може бути саме ключове слово auto, яке розміщує гнучкий елемент залежно від його вмісту.)

Кожен гнучкий елемент має такий flex-basis, як його початковий розмір. Потім звідти будь-який залишився вільний простір розподіляється пропорційно (виходячи з flex-grow) між предметами. При autoцьому основою є розмір вмісту (або визначений розмір з widthтощо). Як результат, предметам з більшим текстом всередині надається більше місця у вашому прикладі.

Якщо ви хочете, щоб ваші елементи були повністю рівними, ви можете встановити flex-basis: 0. Це встановить основу flex на 0, і тоді будь-який простір (який буде весь простір, оскільки всі бази 0) буде пропорційно розподілений на основі flex-grow.

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

Ця діаграма зі специфікації виконує досить непогану роботу щодо ілюстрації пункту.

А ось робочий приклад зі своєю загадкою.


3
Це руїни для мене на Сафарі.
Сніговик

77
Дивовижною справою в цій відповіді є те, що ви пояснюєте гнучку основу цим прикладом краще, ніж де-небудь в буквальному сенсі, в усьому Інтернеті. Я збираюся зв’язатися з MIT щодо надання вам почесної професії.
dudewad

96
Просто кажучи вже про те , що flex: 1;це скорочення для комбінації flex-grow: 1, flex-basis: 0.
Вадим Овчинников

1
На всякий випадок, якщо хтось хоче дізнатися глибше, я натрапив на цю чудову статтю в Інтернеті: css-tricks.com/flex-grow-is-weird
Kumar

О людино, завжди б'є мене по голові, коли я думав, що схопив CSS.
ibic

15

Щоб створити елементи з однаковою шириною, використовуйте Flexдитину (гнучкі елементи):

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

Він дасть усім елементам рядка ширину 25%. Вони не будуть рости і йти один за одним.


77
Це досить незручно, оскільки цілком зменшує вигоду від згинання. Якщо ви збираєтеся жорстко кодувати розміри стовпців, є простіші способи вирішити речі.
Клоар

3
це зовсім не так. Якщо ви хочете мати поля з однаковою довжиною і розбиватися, коли рядок повністю зайнятий .. ви можете легко досягти цього, як це. Можливо, встановіть також міні-ширину, якщо вам потрібна мінімальна ширина
Іларіо Енглер

1
@Kloar Ви говорите, що, як-от, це єдина перевага флексофілів ... Вони, безумовно, можуть бути корисними, коли вам потрібні рівні ширини, наприклад, для чуйності. Крім того, це не так, як флешбокси непрості?
user2999349
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.