Предотвращение растяжения гибких элементов

94

Образец:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

У меня два вопроса, пожалуйста:

  1. Почему это в основном происходит с span?
  2. Каков правильный подход, чтобы предотвратить его растяжение, не затрагивая другие гибкие элементы в гибком контейнере?
Мори
источник

Ответы:

165

Не хотите растягивать пролет в высоту?
У вас есть возможность воздействовать на один или несколько гибких элементов, чтобы не растягивать контейнер на всю высоту.

Чтобы повлиять на все гибкие элементы контейнера, выберите следующее:
Вы должны установитьalign-items: flex-start;значение,divи все гибкие элементы этого контейнера получат высоту своего содержимого.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

Чтобы воздействовать только на один гибкий элемент, выберите это:
Если вы хотите растянуть один гибкий элемент в контейнере, вы должны установитьalign-self: flex-start;этот гибкий элемент. Все остальные flex-элементы контейнера не затрагиваются.

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}
<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

Почему это происходит с span?
Значение свойства по умолчанию align-items- stretch. Это причина того, почему spanвысота заливки div.

Разница между baselineи flex-start?
Если у вас есть текст на гибких элементах с разными размерами шрифта, вы можете использовать базовую линию первой строки для размещения гибкого элемента по вертикали. У гибкого элемента с меньшим размером шрифта есть некоторое пространство между контейнером и самим собой вверху. С flex-startпомощью flex-элемента будет установлен верх контейнера (без пробела).

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}
<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

Вы можете найти больше информации о различиях между baselineи flex-startздесь: В
чем разница между гибким стартом и базовой линией?

Себастьян Брош
источник
1
Спасибо за ответ, но он влияет на все гибкие элементы. И вопрос: в чем разница между baselineи flex-startценностями? Их результаты кажутся такими же. Могут ли они быть разными в той или иной ситуации?
Мори
Вроде здорово! Я был бы признателен , если бы вы сказать мне разницу между baselineи flex-startзначениями, тоже.
Мори
Совет: если вы хотите выровнять их по горизонтали, просто используйте align-items: center;:)
Рикардо Зеа,
# Хак: оберните ваш элемент новым div. Это растянет новый родительский div и оставит ваш элемент нетронутым.
user1948585