chelkaz
@chelkaz

Flex по вертикали — Проценты и пиксели. Как выровнять?

Есть основной блок, во весь экран. в высоту 100%
В нем нужно расположить горизонтально 2 блока так, что бы нижний был 200px, а верхний все остальное пространство.
5afbe6f3c0fbb045539607.jpeg
  • Вопрос задан
  • 1273 просмотра
Пригласить эксперта
Ответы на вопрос 3
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Есть flex:1, есть calc
https://jsfiddle.net/j4wpxLgp/
Ответ написан
Комментировать
@meshoot
Родительскому делаем:
div {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}


Детям делаем:
.top {
   height: calc(100% - 200px);
}

.bottom {
  flex: 0 0 200px;
}
Ответ написан
@CODALSD
<div class="flex row">
	<span class="t2 flex column">
		<em class="t1"></em>
		<em class="t2"></em>
	</span>
</div>

.flex {
	display:flex;
}
.row {
	flex-direction:row;
}
.column {
	flex-direction:column;
}
.t1 {
	flex:1 1 100%;
}
.t2 {
	flex:1 1 200px;
}
div {
	width:100%;
	height:100vh;
	background:blue;
}
.flex.column {
	background:red;
}
.column .t1 {
	background:green;
}

Как то так
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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