Почему не оправдывает контент: растягивайте работу? - PullRequest
0 голосов
/ 31 августа 2018

Почему код ниже не растягивает мои 100px элементы?

Результаты в основном близки к этому:

[100px|100px|100px|.........]

Это очень похоже на flex-start, а не на flex-stretch. Это предполагаемое поведение?

Я ищу:

[...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>

Ответы [ 4 ]

0 голосов
/ 31 августа 2018

Почему justify-content: stretch не работает?

Поскольку во flexbox такого значения нет с justify-content.

Таким образом, ваше правило недопустимо, и браузер по умолчанию имеет значение justify-content: flex-start, начальная настройка.

Используйте свойство flex-grow для гибких элементов для достижения желаемого эффекта.

0 голосов
/ 31 августа 2018

Потому что - если вы хотите, чтобы элементы растягивались по ширине - вы должны разрешить элементам изгиба расти , добавив 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 od ... 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>
0 голосов
/ 31 августа 2018

Проще говоря, для того, чтобы сгибать-растягивать, нужно, чтобы общая ширина элемента была равна или больше, чем у гибкого контейнера. Другими словами, вы можете использовать 500px или даже что-то столь же неясное, как 10000px. И это будет растягиваться пропорционально. Обычно ... хотя, чтобы бороться с этой проблемой, мы используем 100% на каждом предмете. Это предполагает 100% от компонента, но опять же ... если ваш контейнер 500px, это то, что 100% будет равно. Используйте это или большее значение.

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

0 голосов
/ 31 августа 2018

Альтернативный способ равномерного размещения элементов:

.class {
    display: flex;
    justify-content: space-between;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...