Заставьте flex-grow расширять предметы, основываясь на их оригинальном размере

У меня есть 3 кнопки подряд, которые все различаются по ширине. Я хочу, чтобы все они получили одинаковую ширину, чтобы заполнить оставшуюся ширину строки, поэтому самый широкий будет все еще шире, чем другие и т. Д.

Ниже вы можете увидеть, что то, что я пытался сделать с помощью flex, привело к тому, что все кнопки были одинаковой ширины. я знаю flex-grow можно использовать для пропорционального увеличения каждого элемента, но я не могу понять, как заставить их все расти относительно их первоначального размера.

Вы можете видеть во втором ряду, что синий предмет больше, чем два других. Я просто хочу, чтобы все три расширились по сравнению с их текущим размером, чтобы заполнить строку.

Спасибо

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: 1;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}
<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

3 ответа

Решение

Короткий ответ

Все, что вам нужно сделать, это переключиться с flex: 1 в flex: auto,


объяснение

flex-grow Факторы свойств в двух ключевых частях данных:

  1. Свободное место в строке / столбце, где оно используется.
  2. Значение flex-basis имущество.

Распределение свободного пространства

flex-grow Свойство распределяет свободное пространство в контейнере среди элементов Flex в одной строке.

Если нет свободного места, flex-grow не имеет никакого эффекта

Если имеется отрицательное свободное пространство (т. Е. Общая длина гибких элементов превышает длину контейнера), то flex-grow не имеет никакого эффекта и flex-shrink вступает в игру.


flex-basis фактор

когда flex-basis является 0, flex-grow игнорирует ширину / высоту содержимого в элементах flex и обрабатывает все пространство в строке как свободное пространство.

Это абсолютный размер. Все пространство на линии распределено.

когда flex-basis является auto, flex-grow Первые факторы в размере контента в flex-элементах. Затем он распределяет свободное пространство между элементами, в результате чего каждый элемент увеличивается пропорционально длине их содержимого.

Это относительный размер. Только дополнительное место на линии распределяется.

Вот иллюстрация из спецификации:


Примеры:

  • flex: 1 (абсолютный размер)

    Это сокращенное правило разбивается на: flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

    Применительно ко всем элементам flex это сделает их равными по длине, независимо от содержимого.

  • flex-grow: 1 (относительный размер)

    Это правило само по себе будет учитывать как размер контента, так и доступное пространство, поскольку значение по умолчанию для flex-basis является auto,

  • flex: auto (относительный размер)

    Это сокращение учитывает как размер контента, так и доступное пространство, поскольку оно разбивается на:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto

Больше вариантов здесь: 7.1.1. Основные ценности flex

дополнительные ключевые слова для поиска: разница между flex-base: auto flex-based: 0

Не уверен, что это именно то, что вам нужно, но если вы просто установите flex-grow:1 вместо flex:1; Я думаю, что это ваш необходимый результат:

.row-flex {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}

.button {
  flex-grow: 1;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}
<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

Минималистичный ответ с (надеюсь, полезными, объяснительными) альтернативами:

HTML:

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

CSS:

.row-flex {
  display: flex;
}

.button {
  flex-grow: 1; /* make the item grow proportionally to its original size */
                /* default value is 0, the item does not grow */
                /* a meaningful default for flexbox items positioning with */
                /* justify-content: <value>; */      
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

Следующие объявления CSS также работают, потому что все, что они делают, это перезаписывают значение по умолчанию flex-grow: 0; к (для желаемого поведения требуется) flex-grow: 1;:

.button {
  flex: auto;
  ...
}

что является сокращением для:

.button {
  flex: 1 1 auto;    
  ...
}

что является сокращением для:

.button {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  ...
}

С помощью flexСвойство вы можете установить пропорции:

.button {
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.row {
  display: flex;
}

.button--1 {
  background: red;
  flex: 1 1 auto;
}

.button--2 {
  background: green;
  flex: 2 1 auto;
}

.button--3 {
  background: blue;
  flex: 3 1 auto;
}
<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

Другие вопросы по тегам