Question

因为指向jsfiddle的链接讲了一百个字，所以我正在尝试这样做：

基本上，我希望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的高度实际上是动态的）

Answer 1

您可以从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>

Answer 2

flexbox 的子代默认具有相同的高度（align-items: stretch）。只需删除align-items: flex-start。

.flexcontainer {
  display: flex;
  flex-wrap: wrap;
}

.flexchild {
  flex-basis: 140px;
  flex-grow: 2;
  color: white;
  padding: 12px;
}

.first {
  background-color: red;
}

.second {
  background-color: blue;
}

.list.unstyled {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

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

（删除了不必要的 code 。插入了ul而不是多个<br>s。）

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

2 个答案: