Как расположить три блока на flex?

  • bitbox11 месяцев назад
    Как на flex сделать такое расположение блоков

    Ответов: 1
  • Сергей11 месяцев назад
    :root {
    --grid-height: 200px;
    }

    .wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: var(--grid-height);
    justify-content: space-between;
    align-items: center;
    }

    .one {
    width: 49%;
    height: calc((var(--grid-height) / 2) - 5px);
    border: 1px solid #bebebe;
    }

    .two {
    width: 49%;
    height: var(--grid-height);
    border: 1px solid #bebebe;
    order: -1;
    }

    .three {
    width: 49%;
    height: calc((var(--grid-height) / 2) - 5px);
    border: 1px solid #bebebe;
    }


    <div class="wrapper">
    <div class="one">
    <div>Первый блок</div>
    </div>
    <div class="two">
    <div>Второй блок</div>
    </div>
    <div class="three">
    <div>Третий блок</div>
    </div>
    </div>


Ваш ответ:
  • bold
  • italic
  • underline
  • strike
  • Add link
  • Add image
  • Blockquote
  • Align left
  • Align center
  • Align right
  • Code
×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.