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

Posted

技术标签:

【中文标题】删除嵌套 CSS flex 上的自动高度分布？ [复制]【英文标题】：Remove auto height distribution on nested CSS flex? [duplicate] 【发布时间】：2018-06-23 20:05:29 【问题描述】：

我目前在 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>

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于删除嵌套 CSS flex 上的自动高度分布？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

flex 布局解决最后一个布局问题

为嵌套的外部flex项设置固定高度

css怎么自适应宽度

Bootstrap 4 使用 flex-grow 使嵌套的行填充父级填充视口高度

使用 jquery 的 Chrome 上的 Flex 无法正确呈现

flex box内的flex box的CSS高度问题