弹性项目的高度相等的孩子 [英] Equal height children of flex items

问题描述

我在创建flexbox响应式网格时遇到问题，并希望有人能指出我正确的方向。

我希望所有的 .block div的高度相等，并且 .bottom div绝对位于底部。这实际上是在当前的解决方案中工作，但 当 h2 标题太长并且达到2行时，我希望所有 h2 行的标题是相同的高度

。

这可能以某种方式吗？

我做了一个Codepen来说明问题：
http://codepen.io/kenvdbroek/pen/eZKdEQ

<覆盖> h1，h2，h3 {margin：0;} body {margin：0; padding：0;} ul.clean-list {margin：0; padding：0;} ul.clean-list li {list-style：none; margin-bottom：5px;} li：last-child {margin-bottom：0;}。{block-top：50px;}。 border：1px solid red;}。block> .bottom {border：1px solid blue;} @ media only screen and（min-width：480px）{.row.row-flex-wrapper :: before，.row.row-flex-wrapper :: after {content：none ！重要; } .row.row-flex-wrapper :: after {clear：none; } .row.row-flex-wrapper {display：-webkit-flex;显示：-ms-flexbox;显示：flex; flex-wrap：wrap; -webkit-flex-wrap：wrap; -ms-flex-wrap：wrap; } .row.row-flex-wrapper .column {display：-webkit-flex;显示：-ms-flexbox;显示：flex; float：none;边框：1px纯橙色; } .row.row-flex-wrapper .column> .block {display：-webkit-flex;显示：-ms-flexbox;显示：flex; flex-direction：列; -ms-flex-direction：column; -webkit-flex-direction：column; } .row.row-flex-wrapper .column> .block> .block-list {flex：1 0 auto; -ms-flex：1 0 auto; -webkit-flex：1 0 auto; } .row.row-flex-wrapper .column> .block> h2 {}} @ media only screen and（min-width：480px）and（max-width：767px）{.container .row .column {width：50％; }}

< div class =container> < div class =row row-flex-wrapper> < div class =column col-sm-6 col-md-4> < div class =block> < h2>标题1< / h2> < div class =block-list> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的桌面出版软件（如Aldus PageMaker，包括Lorem Ipsum的版本）而得到推广。< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>部分连结< / a> < /锂> < li>< a href =/ button>部分连结2< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =column col-sm-6 col-md-4> < div class =block> < h2>另一个非常长的标题，实际上太长了......< / h2> < div class =block-list> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时是一台未知的打印机......< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =/ another-button>另一个按钮< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =column col-sm-6 col-md-4> < div class =block> < H2>标题< / H2> < div class =block-list> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机Lorem Ipsum一直是业界标准的虚拟文本......< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>非常漂亮的链接< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =column col-sm-6 col-md-4> < div class =block> < h2>这个区块很酷！< / h2> < div class =block-list> < p>一些文字在这里。 Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机Lorem Ipsum一直是业界标准的虚拟文本......< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>另一个连结< / a> < /锂> < li>< a href =/ button>选中此项目< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =column col-sm-6 col-md-4> < div class =block> < h2>标题块< / h2> < div class =block-list> < p>去看看这个项目...... Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机Lorem Ipsum一直是业界标准的虚拟文本......< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>按钮< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =column col-sm-6 col-md-4> < div class =block> < H2> Buttonssssss< / H2> < div class =block-list> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的桌面出版软件（如Aldus PageMaker，包括Lorem Ipsum的版本）而得到推广。< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =＃button>按钮< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =column col-sm-6 col-md-4> < div class =block> < H2>标题< / H2> < div class =block-list> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>链接到项目< / a> < /锂> < li>< a href =/ button>链接到项目< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =column col-sm-6 col-md-4> < div class =block> < H2>标题< / H2> < div class =block-list> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的桌面出版软件（如Aldus PageMaker，包括Lorem Ipsum的版本）而得到推广。< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>链接到项目< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < div class =column col-sm-6 col-md-4> < div class =block> < h2>另一个非常非常非常非常非常长的标题< / h2> < div class =block-list> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的桌面出版软件（如Aldus PageMaker，包括Lorem Ipsum的版本）而得到推广。< / p> < / DIV> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>按钮到项目< / a> < /锂> < / UL> < / DIV> < / DIV> < / DIV> < / div>< / div>

解决方案

flex容器的初始设置是 align- items：stretch 。这会导致弹性项目扩展横轴的全长。这就是所谓的flex equal height columns。

请注意以下几点：

• 等高栏仅适用于flex容器的子元素。换句话说，弹性项目必须具有相同的父项。

  
  
  

  您的问题：
  
  

  
  

  我希望行的所有 h2 标题具有相同的高度。这是可能的吗？

  
  

  不适用于CSS。因为 h2 存在于不同的容器中，所以它们不是兄弟姐妹（它们更像堂兄弟），所以相同的高度不适用。




• 柔性盒中的等高柱仅适用于一条柔线。通过包装创建的其他线上的项目建立了自己的等高线。这意味着平行高度栏不能在多行柔性容器中工作。 align-self 属性可用于各个弹性项目以覆盖 align




• 通过在Flex项目上指定高度（例如 height：300px ），都会覆盖 align-items 和 align-self 对于该项目，并忽略等高设置。

本文主要关注一个容器，其中 flex-direction：row code>。如果容器是 flex-direction：column ，那么等于height 变为等宽。以下是详细的审查：使Flex项目获取内容宽度，而不是父容器的宽度





相关：





• Flex容器中的等高行


• 如何禁用Flexbox中的等高栏？





I'm having a problem creating a flexbox responsive grid and was hoping that someone can point me to the right direction.

I want all the .block div's to be equal height, and the .bottom div absolutely positioned to the bottom. This is actually working in the current solution, but when the h2 heading is too long and reaches 2 lines, I want all the h2 headings of the row to be the same height.

Is this possible in some way?

I made a Codepen to illustrate the problem: http://codepen.io/kenvdbroek/pen/eZKdEQ

h1,
h2,
h3 {
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
ul.clean-list {
  margin: 0;
  padding: 0;
}
ul.clean-list li {
  list-style: none;
  margin-bottom: 5px;
}
li:last-child {
  margin-bottom: 0;
}
.container {
  padding-top: 50px;
}
.block {
  margin-bottom: 30px;
  border: 1px solid red;
}
.block > .bottom {
  border: 1px solid blue;
}
@media only screen and (min-width: 480px) {
  .row.row-flex-wrapper::before,
  .row.row-flex-wrapper::after {
    content: none !important;
  }
  .row.row-flex-wrapper::after {
    clear: none;
  }
  .row.row-flex-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
  }
  .row.row-flex-wrapper .column {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    float: none;
    border: 1px solid orange;
  }
  .row.row-flex-wrapper .column > .block {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
  }
  .row.row-flex-wrapper .column > .block > .block-list {
    flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
  }
  .row.row-flex-wrapper .column > .block > h2 {}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container .row .column {
    width: 50%;
  }
}

<div class="container">
  <div class="row row-flex-wrapper">
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title 1</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Some link</a>
            </li>
            <li><a href="/button">Some link 2</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Another very long title which is actually toooo long...</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer...</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/another-button">Another button</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Very nice link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>This block is cool!</h2>
        <div class="block-list">
          <p>Some text here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy
            text...</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Another link</a>
            </li>
            <li><a href="/button">Check this item</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title Block</h2>
        <div class="block-list">
          <p>Go check out this item... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard
            dummy text...</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Button</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Buttonssssss</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="#button">Button</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Link to item</a>
            </li>
            <li><a href="/button">Link to item</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Link to item</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Another very very very very very very very long title</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Button to item</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

解决方案

This is not possible with flexbox or CSS, in general.

An initial setting of a flex container is align-items: stretch. This causes flex items to expand the full length of the cross axis. This is what is known as "flex equal height columns".

Here are a few notes to keep in mind:

• Equal height columns apply only to the children of a flex container. In other words, the flex items must have the same parent. Otherwise, the equal height feature doesn't apply.

  Your question:

  I want all the h2 headings of the row to be the same height. Is this possible in some way?

  Not with CSS. Because the h2's exist in different containers, they aren't siblings (they're more like cousins), so equal heights don't apply.

• Equal height columns in flexbox apply only to one flex line. Items on other lines, created by wrapping, establish their own equal height line. This means that equal height columns do not work in a multi-line flex container.

• The align-self property can be used on individual flex items to override align-items, which can break the equal height feature.

• By specifying a height on a flex item (e.g. height: 300px), both align-items and align-self are overridden for that item, and the equal height setting is ignored.

• This post focuses on a container with flex-direction: row. If the container is flex-direction: column, then equal height becomes equal width. Here's a detailed review: Make flex items take content width, not width of parent container

Related:

• Equal height rows in a flex container
• How to disable equal height columns in Flexbox?

这篇关于弹性项目的高度相等的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！