Простая проблема гибкости - почему элементы гибкости не имеют одинакового размера без установки основы гибкости
Мне интересно, правильно ли я понимаю flex-shrink и flex-grow. Я пытаюсь понять, почему гибкие дети не одного размера. Я просто хочу иметь возможность добавлять как можно больше гибких дочерних элементов (т. е. .flex-item div) в содержащий родительский div, и чтобы они изменяли размер до той же ширины, что и друг друга. В этом случае текст расширяет ширину одного из них.
Как это можно исправить, не добавляя жестко закодированный flex-basis?
Любое объяснение было бы очень полезно. Спасибо за любую помощь здесь.
#container {
display: flex;
justify-content: space-between;
width: 100%;
background: pink;
overflow: hidden; /* words should wrap anyway... */
}
.flex-item {
border: 1px solid red;
flex: 0 0 auto; /* should make flex items equal size */
word-wrap: break-all;
/* flex-basis: 0; makes flex items too narrow; they should stretch to fill width equally depending on no of flex items inside containing div. Also shouldn't require hard-coding the width */
}<div id='container'>
<div class='flex-item'>
<p>ri bergber gyiruek weeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergerg</p>
</div>
<div class='flex-item'>
<p>ri bergber gyiruew</p>
</div>
<div class='flex-item'>
<p>ri bergber gyiruek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wrgber gyiruek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wg</p>
</div>
</div>Кодовое слово: https://codepen.io/anon/pen/JgRawo
меня больше интересует почему
но вы уже приняли решение, поэтому сделайте его дубликатом: stackoverflow.com/a/29503264/8620333
что забавно, так это то, что вы приняли ответ, который точно такой же, как вопрос, который я связал, поэтому, если вы действительно думаете, что это не дубликат, мне больше нечего сказать
Ответы 1
Это можно сделать с помощью всего лишь свойства flex: 1, которое устанавливает значения flex-grow: 1, flex-shrink: 1 и flex-basis в разных браузерах по-разному, в хроме — 0%.
Таким образом, каждый элемент увеличивается до одинакового размера, а его содержимое оборачивается в соответствии с его шириной.
С вашим значением flex: 0 0 auto вы устанавливаете flex-basis на «смотреть мое свойство ширины», которое будет зависеть от содержимого, а затем вы также говорите, что не сжиматься и не увеличиваться.
#container {
display: flex;
justify-content: space-between;
background: pink;
width: 100%;
}
.flex-item {
flex: 1;
border: 1px solid red;
}<div id='container'>
<div class='flex-item'>
<p>ri bergber gyiruek weeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergerg</p>
</div>
<div class='flex-item'>
<p>ri bergber gyiruew</p>
</div>
<div class='flex-item'>
<p>ri bergber gyiruek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wrgber gyiruek wveeuyrg eir7 gueruygergb
e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wek wveeuyrg eir7 gueruygergb e8iygerg ier7 guer y org ery8g e g8e ergervwev we wefwew fwef we fwf wg</p>
</div>
</div>
Вас больше интересует Зачем или решение?