删除嵌套 CSS flex 上的自动高度分布？ [复制]

Question

我目前在 parent 以及中间的 child 元素上设置 display:flex。

现在的问题是，在 child 元素上应用了一个嵌套的 flex 属性。 grandchild 元素的高度会自动分布并在它们之间生成不需要的间距。

如何在子元素上保留display:flex 属性的同时去除多余的间距？

.parent{
  background:#cdcdcd;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  padding:30px 10px;
  box-sizing: border-box;
}

.child{
  flex-grow:1;
  flex-basis:33.3%;
  padding:10px;
  background:#a2a2a2;
  box-sizing: border-box;
}

.child:nth-child(3){
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  padding:10px;
  align-items: flex-start;
}

.grandchild {
    padding: 10px;
    background: #696969;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    box-sizing: border-box;
}

<div class="parent">
  <p style="position:absolute; top:-2px; left:28px;">parent</p>
  <div class="child">child<br />

    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.

    </p>

  </div>
  <div class="child">child
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
  </div>
  <div class="child">child<br />

    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.

    </p>
  </div>
</div>

Answer 1

您可以通过在.parent 元素 (flex-container) 上设置的align-items: flex-start 来做到这一点：

.parent {
  background: #cdcdcd;
  display: flex;
  /*flex-direction: row; by default*/
  flex-wrap: wrap;
  align-items: flex-start; /* added */
  padding: 30px 10px;
  box-sizing: border-box;
}

.child {
  flex: 1 1 33.33%; /* shorthand */
  padding: 10px;
  background: #a2a2a2;
  box-sizing: border-box;
}

.child:nth-child(3){
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  padding: 10px;
  align-items: flex-start;
}

.grandchild {
  padding: 10px;
  background: #696969;
  flex: 1 0 100%; /* shorthand */
  box-sizing: border-box;
}

<div class="parent">
  <p style="position:absolute;top:-2px;left:28px">parent</p>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
  <div class="child">child
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
  </div>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
</div>

默认 align-items property 的 value 设置为 stretch，这使得 flex-items 填充 flex-container cross axis (y) 其中所有 items 的 height，因此 flex-container，由“最高”容器的高度决定。

加法：

如果您更喜欢视觉上更好的解决方案：

解决方案 #2：

.parent {
  background: #cdcdcd;
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  padding: 30px 10px;
  box-sizing: border-box;
}

.child {
  flex: 1 0 33.33%;
  padding: 10px;
  background: #a2a2a2;
  box-sizing: border-box;
}

.child:nth-child(3){
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  padding: 10px;
  /*align-items: flex-start; commented out*/
  align-self: flex-start; /* added */
}

.grandchild {
  padding: 10px;
  background: #696969;
  flex: 1 0 100%;
  box-sizing: border-box;
}

<div class="parent">
  <p style="position:absolute;top:-2px;left:28px">parent</p>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
  <div class="child">child
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
    <div class="grandchild">grandchild</div>
  </div>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
</div>

解决方案 #3：

.parent {
  background: #cdcdcd;
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  padding: 30px 10px;
  box-sizing: border-box;
}

.child {
  flex: 1 1 33.33%;
  padding: 10px;
  background: #a2a2a2;
  box-sizing: border-box;
}

.child:nth-child(3){ /* added additional wrapper div to html */
  display: flex;
  flex-direction: column; /* modified */
  flex-wrap: wrap;
  padding: 10px;
  /*align-items: flex-start;  commented out*/
}

.grandchild {
  padding: 10px;
  background: #696969;
  flex: 1 0 100%;
  box-sizing: border-box;
}

<div class="parent">
  <p style="position:absolute;top:-2px;left:28px">parent</p>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibusCurabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
  <div class="child">child
    <div> <!-- additional wrapper div -->
      <div class="grandchild">grandchild</div>
      <div class="grandchild">grandchild</div>
      <div class="grandchild">grandchild</div>
    </div>
  </div>
  <div class="child">child<br>
    <p>
      Curabitur ullamcorper erat eu dolor condimentum tempor. Praesent vel tortor rutrum, consequat nisl quis, congue turpis. Aliquam faucibus, arcu in egestas aliquet, massa mauris scelerisque nisl, sit amet interdum libero leo eu ligula. Aliquam tempor tincidunt
      ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet,ante vel bibendum. Nullam volutpat mattis laoreet. Praesent et ullamcorper ante, eget cursus ante. Nam et elit quam. Sed velit quam, suscipit ut mollis sit amet, dapibus eu lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Nullam egestas arcu at molestie bibendum. Quisque et urna vestibulum, eleifend tortor id, volutpat odio. Nullam quis commodo felis, eu mattis augue. Fusce ante nisi, tincidunt in faucibus eget, mollis vitae felis. Vestibulum auctor
      lorem lacinia, luctus tortor et, volutpat mi.
    </p>
  </div>
</div>