css - 混合行和列的 Flex 布局

Question

我可以轻松地使用 float 制作此布局。但是很难处理 flex box。

样式:

    .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

Flexbox codepen demo

它是如何工作的？

将您的列包裹在具有高度设置的公共(public)父元素(例如 main 元素)中。然后使用 flex-direction: column 放置你的元素，并使用 justify-content: space-between 在 b 和 c 之间创建一个空间。

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 demo

它是如何工作的？

使用 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;
}