Не хотите растягивать пролет в высоту?
У вас есть возможность воздействовать на один или несколько гибких элементов, чтобы не растягивать контейнер на всю высоту.
Чтобы повлиять на все гибкие элементы контейнера, выберите следующее:
Вы должны установить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
здесь: В
чем разница между гибким стартом и базовой линией?
baseline
иflex-start
ценностями? Их результаты кажутся такими же. Могут ли они быть разными в той или иной ситуации?baseline
иflex-start
значениями, тоже.baseline
иflex-start
?align-items: center;
:)