Question

我对弹性盒非常困惑。这是我现在的布局：

代码：

<html>
<head>
    <style>
        /* flex boxes */
        .interblock{background:gray;height:100%;display:flex;flex-flow:row wrap;}
        .subrect{flex:1 90%;}
        .labelrect{flex:0 1 10%;}
        .footrect{flex:1 100%;background:yellow;height:auto;}
        .topleft{flex:0 1 50%;height:auto;background:green;}
        .topright{flex:0 1 50%;height:auto;background:red;}
    </style>
</head>

<body>
    <div class='interblock'>
        <div class='topleft'>
            topleft
        </div>    
        <div class='topright'>
            topright
        </div>
        <div class='labelrect' style='background:coral'>labelrect</div>
        <div class='subrect' style="background:orange">subrect</div>    
        <div class='labelrect' style='background:cyan'>labelrect</div>
        <div class='subrect' style="background:blue">subrect</div>      
        <div class='footrect'>
            footer
        </div>
    </div>
</body>
</html>

这种布局几乎是正确的。问题是我希望subrects / labelrects的中心块使用页眉和页脚未使用的100％的高度。可以有任意数量的subrects / labelrects，它们都应该具有相同的高度。我不确定如何指定考虑页眉和页脚内容的扩展高度。如何将labelrect / subrect块设置为高度100％ - 页眉 - 页脚？

Answer 1

您需要更改一些标记。在这里，我创建了2个包装器，1个用于top，1个用于middle。

给予top和footrect flex: 0按内容大小和middle flex: 1来填充余下的空间。

/* flex boxes */

html,
body {
  margin: 0;
}
.interblock {
  background: gray;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.top,
.footrect {
  flex: 0;
}
.top {
  flex-basis: auto;
  display: flex;
}
.middle {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.subrect {
  flex: 1 90%;
}
.labelrect {
  flex: 0 1 10%;
}
.footrect {
  background: yellow;
}
.topleft {
  flex: 1;
  background: green;
}
.topright {
  flex: 1;
  background: red;
}

<div class='interblock'>
  <div class='top'>
    <div class='topleft'>
      topleft<br><br>
    </div>
    <div class='topright'>
      topright
    </div>
  </div>
  <div class='middle'>
    <div class='labelrect' style='background:coral'>labelrect</div>
    <div class='subrect' style="background:orange">subrect</div>
    <div class='labelrect' style='background:cyan'>labelrect</div>
    <div class='subrect' style="background:blue">subrect</div>
  </div>
  <div class='footrect'>
    footer<br><br>
  </div>
</div>

控制行柔性盒中的高度扩展

1 个答案: