Заставьте 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
Факторы свойств в двух ключевых частях данных:
- Свободное место в строке / столбце, где оно используется.
- Значение
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>