css - 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>

提前谢谢了。

标签： cssflexbox

Answer 1

Flexbox 代码笔演示

它是如何工作的？

main将列包装在具有高度集的公共父级（例如元素）中。然后将元素放置在和 之间，并在和flex-direction: column之间创建一个空间。bcjustify-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创建包含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;
}