Question

是否可以在flexbox容器中包装子元素，但是以百分比形式设置高度（对于.wrap，.block和.mini）？就像在这里 - http://jsfiddle.net/4cghpvyo/19/，但在％，以使其响应。或任何其他想法如何使其响应？

.wrap {
display: flex;
width: 100%;
height: 500px;
border: 1px solid #ccc;
flex-wrap: wrap;
flex-direction: column;
}

.block {
    width: 30%;
    height: 500px;
    background-color: yellow;
}

.mini {
    box-sizing: border-box;
    width: 70%;
    height: 125px;
    background-color: orange;
    border: 1px solid red;
}

谢谢！

Answer 1

视口单元（vh / vw）通常用于为父级提供响应但固定的高度，其中子级的百分比可以工作，但有时无法实现。

要使height: 100%处理wrap，其父级需要设置高度（或绝对位置），如果父级也使用百分比，则其父级需要高度，依此类推，直到达到html元素，该高度设置为视口的高度。

此处显示了将高度应用于html和body。

对于项目，它变得简单，在您的情况下，block设置为100％，mini设置为25％，两列都将填充父级。

html, body {
    height: 100%;
    margin: 0;
}

.wrap {
    display: flex;
    height: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    flex-wrap: wrap;
    flex-direction: column;
}

.block {
    width: 30%;
    height: 100%;
    background-color: yellow;
}

.mini {
    box-sizing: border-box;
    width: 70%;
    height: 25%;
    background-color: orange;
    border: 1px solid red;
}

<div class="wrap">
    <div class="block"></div>
    <div class="mini"></div>
    <div class="mini"></div>
    <div class="mini"></div>
    <div class="mini"></div>
</div>

根据评论，您提到block可能包含不同大小的图像，这些图像应该构成高度，然后使用给定的标记并使用flex 列方向，赢得了'是可能的，因为flex 列项需要其父级具有固定高度，否则它们将不会换行。

问题的一个简单解决方案是将wrap的弹性方向设置为row，在mini附近添加一个额外的元素（inner-wrap）并使其成为一个弹性柱容器。

.wrap {
    display: flex;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.block {
    width: 30%;
    background-color: yellow;
}
.block img {
    display: block;
    width: 100%;
}
.inner-wrap {
    width: 70%;   
    display: flex;
    flex-direction: column;
}
.mini {
    box-sizing: border-box;
    height: 25%;
    background-color: orange;
    border: 1px solid red;
}

<div class="wrap">
  <div class="block">
    <img src="http://placehold.it/200x300">
  </div>
  <div class="inner-wrap">
    <div class="block"></div>
    <div class="mini"></div>
    <div class="mini"></div>
    <div class="mini"></div>
    <div class="mini"></div>
  </div>
</div>

如何在Flex容器中包装子元素？

1 个答案: