3

Привет! Подскажите, пожалуйста, как с помощью Flexbox сделать так, чтобы синий блок оказался под красными?

Ширина желтого и синего - 50%, 2 красных по 25% введите сюда описание изображения

1 ответ 1

0

Например, с помощью flexbox, вложенного внутрь другого flexbox

Матчасть по flexbox

html, body {
    margin: 0;
    padding: 0;
}

.container {
    height: 100vh;
    display: flex;
    background-color: #ccf;
}

.col1 {
    background-color: yellow;
    width: 50%;
}

.col2 {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.col2-top {
    height: 50%;
    display: flex;
}

.col2-top-left {
    width: 50%;
    background-color: red;
}

.col2-top-right {
    width: 50%;
    background-color: red;
}

.col2-bottom {
    background-color: blue;
    height: 50%;
}
<div class="container">
    <div class="col1">col1</div>
    <div class="col2">
        <div class="col2-top">
            <div class="col2-top-left">col2-top-left</div>
            <div class="col2-top-right">col2-top-right</div>
        </div>
        <div class="col2-bottom">col2-bottom</div>
    </div>
</div>

1
  • Спасибо большое! Буду пробовать.
    – user233877
    17 мая 2017 в 15:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.