flexbox如何让项目在保持高度的同时水平和垂直调整大小答案

【问题标题】：flexbox how to have items resize both horizontally and vertically whilst preserving heightflexbox如何让项目在保持高度的同时水平和垂直调整大小
【发布时间】：2016-05-24 03:20:06
【问题描述】：

这是我的问题：

我在一个容器内有 3 个容器，这些容器内有内容。

如果一个容器被垂直和水平移除，我希望每个容器都填满剩余的空间。

我将 flexbox 与 flex-flow: row wrap 一起使用，假设我们删除了两个底部容器之一，这非常有用。

然后为了让它们在垂直方向上重新调整大小，我使用了 height 自动属性，并且可以预见，容器元素会填满其容器的剩余高度。

<!DOCTYPE html>
<html>
<head>
    <style>
        div{border: 1px solid black}
        html, body{height: 100%; width: 100%;}
        #container1{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row wrap;
        }
        #subContainer3, #subContainer2{
            flex: 1 49%;
        }
        #subContainer1{
            flex: 1 100%;
        }
        .content{
            background-color: lightgray;
            height: 90%;
        }
    </style>
</head>
<body>
    <div id="container1">
        <div id="subContainer1">
            <div class="content"></div>
        </div>
        <div id="subContainer2">
            <div class="content"></div>
        </div>
        <div id="subContainer3">
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

但是，因为我没有为子容器设置明确的高度，所以它们中的所有内容都不能占子容器的百分比。

如何实现让子容器在行和列方向上调整大小并同时使其内容占其高度的百分比的预期目标？

****注意****

作为补充说明，虽然这对某些人来说可能很明显，但任何由弹性框确定的高度仍然不会被任何尝试使用百分比高度的子 div 识别。例如，如果我们的内容 div 自己在哪里有想要成为其父母身高 % 的孩子，我们将不得不在列方向上使用 flex-box 来建立它而不是 %height。

【问题讨论】：

我认为 height: 90%; 在这里不起作用，因为最大的 content 决定了外部容器的高度和 flex 行，而您是在说 height: 90% 本身？
对不起，我知道 90% 的高度不起作用，我只是用代码说明问题。我想要一个解决方案，我可以保持 90% 的高度，同时能够让 subContainer div 垂直扩展。一旦我为 subContainer 设置了高度，内容高度（90%）就会起作用，但是如果我假设从 tio 中删除 div，剩余的 div 不会扩展以填充高度。
那么.content 有兄弟姐妹吗？并且您希望content 与subContainer 中的其他项目成比例增加（高度的9 倍）？你要的设计不清楚=/

标签： jquery html css responsive-design flexbox

【解决方案1】：

您可以通过向子容器 DIV 添加另一个 flexbox 来实现：

    div{border: 1px solid black}
    html, body{height: 100%; width: 100%; margin:0;padding:0}
    #container1{
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        display: flex;
        flex-flow: row wrap;
    }
    #subContainer3, #subContainer2{
        flex: 1 49%;
        display:flex;
        flex-flow: column wrap;
    }
    #subContainer1{
        flex: 1 100%;
        display:flex;
        flex-flow: column wrap;
    }
    .content{
        flex: 1 100%;
        background-color: lightgray;
    }

<div id="container1">
    <div id="subContainer1">
        <div class="content"></div>
    </div>
    <div id="subContainer2">
        <div class="content"></div>
    </div>
    <div id="subContainer3">
        <div class="content"></div>
    </div>
</div>

注意：我从页面中删除了边距和填充以避免滚动，只要您想保留边框，我还将主容器 div 的宽度和高度编辑为负 4px边框的额外宽度和高度

【讨论】：

如果我将高度设置为子容器的div，那么它们在垂直方向上不会像在删除子容器时在水平方向上那样灵活扩展。例如，如果您删除 subContainer1，其他两个子容器不会填满整个页面。这就是问题的本质
是的，抱歉，我编辑了答案，我认为它会满足您现在的需求

【解决方案2】：

您需要在子容器 2 和 3 周围添加一个额外的包装并使用嵌套的 flex。下面的例子证明了这一点。

 html,
 body {
   height: 100%;
   width: 100%;
 }
 #container1 {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 .horizontal {
   display: flex;
   flex-flow: row wrap;
   flex: 1 0 auto;
 }
 #subContainer1,
 #subContainer2,
 #subContainer3 {
   flex: 1 0 auto;
   border: 1px solid black;
 }
 .content {
   background-color: lightgray;
 }

<div id="container1">
  <div id="subContainer1">
    <div class="content"></div>
  </div>

  <div class="horizontal">
    <div id="subContainer2">
      <div class="content"></div>
    </div>
    <div id="subContainer3">
      <div class="content"></div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

尝试只使用填充来添加一些占位符高度，默认的align-items: stretch; 应该保持content 列的高度相等。在动态高度容器的子容器中使用 height: 90%; 没有意义。

您可以在此处找到关于 height 与 % 值何时有效和无效的详细说明。我还有一个关于如何使高度与容器的width 成比例的答案，这可能是您设计的一个选项：

Percentage Height HTML 5/CSS

【讨论】：