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

  

Flexbox codepen demo

它是如何运作的？

将您的列包装在具有高度设置的公共父级（例如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 demo

它是如何运作的？

使用Grid Layout，您可以通过创建包含10列和2行的布局以及b和c之间的差距来实现同样的目标。 {1}}。然后调整所有各种（row-gap: 10px） - （column|row）

<强> CSS

start|end

Answer 2

您可以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; }来实现此目的

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;