Flex Layout混合行和列

时间:2018-05-23 07:35:43

标签: css css3 flexbox

enter image description here

我可以轻松地使用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>
非常感谢提前。

2 个答案:

答案 0 :(得分:5)

  

Flexbox codepen demo

它是如何运作的?

将您的列包装在具有高度设置的公共父级(例如main元素)中。然后使用flex-direction: column放置元素,并使用bcjustify-content: space-between之间创建一个空格。

a的高度为容器的100%,因此bc可以通过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行的布局以及bc之间的差距来实现同样的目标。 {1}}。然后调整所有各种(row-gap: 10px) - (column|row

<强> CSS

start|end

答案 1 :(得分:3)

您可以grida,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;