Почему не работает justify-content: stretch?
Почему приведенный ниже код не растягивает мои элементы на 100 пикселей?
Результаты в основном близки к этому:
[100px|100px|100px|.........]
Это очень похоже на гибкое начало, а не на гибкое растяжение. Это предполагаемое поведение?
Я ищу:
[...100px...100px...100px...]
.box {
display: flex;
justify-content: stretch;
width: 500px;
}
.item {
width: 100px;
}<div class = "box">
<div class = "item">1</div>
<div class = "item">2</div>
<div class = "item">3</div>
</div>Потому что вы добавили width в .item. Вам необходимо удалить свойство width и вместо этого предоставить flex: 1.
Ответы 5
Альтернативный способ равномерно распределить элементы:
.class {
display: flex;
justify-content: space-between;
}
Я думаю, он спрашивает, почему он не растягивается на элементы меньшей ширины, с чем я тоже сталкивался раньше. Я думаю, это просто поведение по умолчанию.
Если я использую ваш трюк, мои гибкие элементы выглядят странно, потому что гибкие элементы имеют разную ширину в зависимости от содержимого. Пожалуйста, посмотрите здесь: codepen.io/Sulaman/pen/oQoqOw Пожалуйста, измените режим просмотра кода пером на вертикальный.
Он спрашивает не об этом. Он хочет, чтобы для каждого применяемого элемента был применен интервал с растяжкой максимальной ширины.
Потому что - если вы хотите, чтобы элементы растягивались по ширине - вы должны разрешить гибким элементам расти, добавив flex-grow: 1;:
.box {
display: flex;
justify-content: stretch;
width: 500px;
border: 1px solid red;
}
.item {
width: 100px;
border: 1px solid green;
flex-grow: 1;
}<div class = "box">
<div class = "item">1</div>
<div class = "item">2</div>
<div class = "item">3</div>
</div>Если вы не имеете в виду, что они должны расти, а просто распределяться по всей ширине своего контейнера, используйте justify-content: space-between или ... space-around:
.box {
display: flex;
justify-content: space-around;
width: 500px;
border: 1px solid red;
}
.item {
width: 100px;
border: 1px solid green;
}<div class = "box">
<div class = "item">1</div>
<div class = "item">2</div>
<div class = "item">3</div>
</div>довольно круто, если вы измените размер экрана и увеличите числа, вы увидите, что ваша последняя строка выглядит не очень хорошо.
Проще говоря, для того, чтобы сработало flex-stretch, требуется, чтобы общая ширина элемента была равна или больше, чем у гибкого контейнера. Другими словами, вы можете использовать 500 пикселей или даже что-то неясное, например, 10000 пикселей. И пропорционально растянется. Однако обычно ... для решения этой проблемы мы используем 100% для каждого элемента. Это предполагает 100% компонента, но опять же ... если ваш контейнер 500 пикселей, это то, что будет равно 100%. Используйте это или большее значение.
Когда я изучал флекс, я нашел этот простой гибкий генератор бесценным, думаю, визуально он покрывает тот случай, о котором вы говорите.
это неправильно, если вы используете большее значение, то здесь будет иметь место эффект сжатия, а не эффект растяжения.
Why doesn't
justify-content: stretchwork?
Потому что во флексбоксе такого значения с justify-content нет.
See MDN: stretch is not supported by flexible boxes (flexbox).
Итак, ваше правило недействительно, и браузер по умолчанию использует исходную настройку justify-content: flex-start.
Используйте свойство flex-grow для гибких элементов для достижения желаемого эффекта.
Согласно MDN (developer.mozilla.org/en-US/docs/Web/CSS/justify-content), он существует ... и если мы проверим новый черновик (drafts.csswg.org/css-align-3/#propdef-justify-content), они сказали, что он ведет себя как flex-start ... вероятно, MDN нужно быть более точным, поскольку это значение, вероятно, используется с CSS-сеткой?
Как и наблюдал и писал о раньше, MDN - это информация из вторых рук. Авторы - люди и делают ошибки. Перейдите непосредственно к спецификациям для получения официальной и правильной информации.
Но здесь (drafts.csswg.org/css-align-3/#propdef-justify-content) я могу прочитать, что justify-content принимает значение <content-distribution>, и это значение может быть растянутым: drafts.csswg.org/css-align-3/#typedef-content-distribution. Я понимаю, что это невозможно для flexbox, но он существует
Но justify-content: stretch по-прежнему не применяется в flexbox, как определено в спецификации flexbox.
Да, это должно выглядеть так, что для гибких контейнеров используется flex-start вместо flex-stretch. Вот что говорит W3C о justify-content: stretch
The justify-content property applies along the main axis, but since stretching in the main axis is controlled by flex, stretch behaves as flex-start.
Кроме того, я мог бы опоздать с ответом на вопрос, но MDN также обновил свою страницу о justify-content. См. Примечания к свойству растяжения MDN
У вас в разметке нет элементов с классом
.class?