@9qsoque

Flex-grow 1 не работает, что делать?

Не могу понять, почему блок .twitter_text не прижимает вниз блок .twitter_swipe, хотя flex-grow указан как 1, и flex-direction указан как column, что должно позволять блоку занимать все пространство по высоте.

<div class="twitter">
				<div class="container">
					<div class="twitter__row">
						<div class="twitter__body">
							<div class="twitter__icon">
									<img src="img/icons/twitter.png" alt="">
							</div>
							<div class="twitter_name">
								AOD New York  @aod<span class="gray">  /  35 min</span>
							</div>
							<div class="twitter__text">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus ac nulla semper rhoncus. Nullam a odio porttitor, dictum turpis vitae, pretium ante amet.
							</div>
						</div>
						<div class="twitter__swipe">
								<div class="swipe__icon">
									<img src="img/icons/Ellipse_1.png" alt="">
								</div>
								<div class="swipe__icon2">
									<img src="img/icons/Ellipse_2.png" alt="">
								</div>
								<div class="swipe__icon3s">
									<img src="img/icons/Ellipse_2.png" alt="">
								</div>
						</div>
					</div>
				</div>
			</div>

.twitter {
}
.container {
	max-width: 1600px;
	max-height: 800px;
	margin: 0px auto;
	overflow: hidden;
}
.twitter__row {	
	padding: 124px 263px 183px 301px;
}
.twitter__body{
	display: flex;
	flex-direction: column;	
}
.twitter__icon {
	margin: 0 auto 37px;
}
.twitter_name {
	color: #353738;
	font-family: Lato;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
.gray{
	color: #848789;
	font-family: "Lato - Light";
	letter-spacing: 1.8px;
	font-weight: 300;
}
.twitter__text {
	flex: 1 1 auto;
	margin: 27px 0 0 0;
	color: #848789;
	font-family: Lato;
	font-size: 24px;
	font-style: italic;
	line-height: 34px;
	text-align: center;	
}
.twitter__swipe {
	display: flex;	
	justify-content: center;
	margin: 0px 0px 68px 0px;
}
.swipe__icon {

}
.swipe__icon2 {
	padding: 0px 9px 0px 9px;
}
.swipe__icon3 {

}
  • Вопрос задан
  • 236 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Ну так а с чего бы ему что-то прижимать? Они вообще в разных блоках и никак не связаны.
Ну и flex-grow это не про "прижимание", это про "заполнение имеющегося места".

Чтобы что-то "прижимало" .twitter_swipe тебе надо .twitter__row слать flex column, не забыть задать высоту и задать уже для .twitter__body flex-grow.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы