Flex Layout, смешивающий строки и столбец

Question

Я могу сделать этот макет легко, используя float.но с трудом сделать с гибкой коробкой.

css:

    .a {
      background: red;
      float: left;
      width: 30%;
      height: 100px;
    }

    .b,
    .c {
      background: green;
      overflow: hidden;
      height: 45px;
    }

    .b {
      margin-bottom: 10px;
    }

    .c {
      background: lightblue
    }

html:

    <div class="a">column</div>
    <div class="b">row1</div>
    <div class="c">row2</div>

большое спасибо заранее.

Answer 1

Вы можете достичь этого, используя grid, обернув a,b,c в grid-container

.grid-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.a {
      background: red;
    /* width: 30%; */
    height: 100px;
    grid-row-start: 1;
    grid-row-end: 3;
    }

    .b,
    .c {
      background: green;
      overflow: hidden;
      height: 45px;
    }

    .b {
      margin-bottom: 10px;
    }

    .c {
      background: lightblue;
    }

<div class="grid-container">
  <div class="a">column</div>
  <div class="b">row1</div>
  <div class="c">row2</div>
</div>

Answer 2

Демонстрация кодов Flexbox

Как это работает?

Оберните столбцы в общий родительский элемент (например,элемент main) с установленной высотой.Затем поместите ваши элементы с flex-direction: column и создайте пространство между b и c с justify-content: space-between.

Высота столбца a равна 100% контейнера, так что bи c может перейти в новый столбец благодаря flex-wrap: wrap.

CSS

---

main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100px;
}



.a {
  background: red;
  height: 100%;
  width: 30%;
}

.b, .c {
  background: green;
  height: 45px;
  width: 70%;
}

.c {
  background: lightblue
}

---

Демонстрация Grid Layout

Как это работает?

С Grid Layout вы можете добиться того же, создав макет с 10столбцы и 2 строки и разрыв между b и c с row-gap: 10px.Затем настройте все различные (column|row) - (start|end)

---

CSS

main {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   row-gap: 10px;
   width: 100%;
}

.a {
    background: red;
    grid-area: 1 / 1 / 3 / 3;
}

.b,
.c {
  grid-column: 3 / 11;      
  background: green;
  overflow: hidden;
  height: 45px;
}

.b {
  grid-row-start: 1;
}

.c {
  grid-row-start: 2;
  background: lightblue;
}