Как с помощью flex-box, один контейнер оставить по центру а второй прижать к полу
Всем привет, хороших выходных. Ребя, чет торможу жуть, вчера весь вечер промчался. Ну можно же через margin-top: auto; - прижать элемент к полу. Но у меня такая история. (Вот ссылка на пример: https://codepen.io/pipskvik/pen/rNOarxb). HTML:
<main>
<div class="wrap">
<div class="block1">Any text Any text Any text Any text Any text Any text Any text Any text Any text </div>
<div class="block2">Any text Any text Any text Any text Any text Any text Any text Any text Any text </div>
</div>
</main>
CSS:
.wrap {
width: 1000px;
min-height: 100vh;
background-color: #999fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.block1 {
width: 300px;
height: 100px;
background-color: salmon;
margin: 10px;
}
.block2 {
width: 300px;
height: 100px;
background-color: red;
margin: 10px;
}
У меня есть страничка, во весь вьюпорт фотка - это мэйн контейнер. Далее идет 2 блока, 1- заголовок, который должен быть по центру, а внизу кнопочки слайдера. Ну и как-то можно flexom оставить заголовок по центру, а кнопоньки с каким-то отступом прижать в низу?) Буду рад помощи)))
Ответы (1 шт):
Автор решения: MaximLensky
→ Ссылка
смотреть на весь экран
.wrap {
width: 1000px;
min-height: 100vh;
background-color: #999fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.block1 {
width: 300px;
height: 100px;
background-color: salmon;
align-content: center;
margin: auto;
}
.block2 {
width: 300px;
height: 100px;
background-color: red;
align-content: flex-end;
}
<main>
<div class="wrap">
<div class="block1">Any text Any text Any text Any text Any text Any text Any text Any text Any text </div>
<div class="block2">Any text Any text Any text Any text Any text Any text Any text Any text Any text </div>
</div>
</main>