html - 使用flex-direction使flexbox子级填充可用的垂直空间:行

因为到jsfiddle的链接讲了一百个单词，所以这是我尝试做的事情：

https://jsfiddle.net/5zs823L9/7

基本上，我希望flexbox中的子级拉伸并填充其行中所有可用的垂直空间，但是我似乎不知道该怎么做。例如在这种情况下：

.flexcontainer {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.flexchild {
    flex-basis: 140px;
    flex-grow: 2;
    flex-direction: row;
}

.flexchild.first {
    min-height: 128px;
    height: 256px;
}

.flexchild.second {
    min-height: 128px;
}

在这种情况下，如何使flexchild.second伸展并达到256像素高？ （.flexchild.first的高度实际上是动态的）

最佳答案

您可以从align-items: flex-start;中删除​​.flexcontainer

.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    /* align-items: stretch; */ /* default */
}

.flexchild {
  display: block;
    position: relative;
    flex-basis: 140px;
    flex-grow: 2;
    vertical-align: sub;
    color: white;
    padding: 12px;
    flex-direction: row;
}

.first {
  background-color: red;
}

.second {
  background-color: blue;
}

<div class="flexcontainer">
  <div class="flexchild first">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9
  </div>
  <div class="flexchild second">
    this should be as high as the red child
  </div>
</div>

或者您可以将align-self: stretch;设置为.second

.flexcontainer {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.flexchild {
  display: block;
    position: relative;
    flex-basis: 140px;
    flex-grow: 2;
    vertical-align: sub;
    color: white;
    padding: 12px;
    flex-direction: row;
}

.first {
  background-color: red;
}

.second {
  background-color: blue;
  align-self: stretch;
}

<div class="flexcontainer">
  <div class="flexchild first">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9
  </div>
  <div class="flexchild second">
    this should be as high as the red child
  </div>
</div>

关于html - 使用flex-direction使flexbox子级填充可用的垂直空间:行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56515684/