html - flex 元素的等高 child

Question

我在创建 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;
}
.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>

Answer 1

通常情况下，这对于 flexbox 或 CSS 是不可能的。

flex 容器的初始设置是align-items: stretch。这会导致 flex 元素扩展 cross axis 的全长.这就是所谓的“flex 等高列”。

这里有几点要记住:

• 等高列仅适用于 flex 容器的子。换句话说， flex 元素必须有相同的父项。否则，等高功能不适用。

您的问题:

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

不适用于 CSS。因为 h2 存在于不同的容器中，所以它们不是 sibling (它们更像是表亲)，因此不适用等高。

• flexbox 中的等高列仅适用于一个 flex 行。通过换行创建的其他行上的元素建立了自己的等高行。这意味着 equal height columns do not work in a multi-line flex container .

• align-self 属性可用于单个 flex 元素以覆盖 align-items，这会破坏等高功能。

• 通过指定 flex 元素的高度(例如 height: 300px)，align-items 和 align-self被该元素覆盖，等高设置被忽略。

• 这篇文章重点介绍了一个带有 flex-direction: row 的容器。如果容器是 flex-direction: column，则 equal height 变为 equal width。这是详细的评论:Make flex items take content width, not width of parent container

更多详情:

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

重复的帖子:

• How to get header from cards or similar to have the same height with flex box?
• CSS - How to have children in different parents the same height?
• Positioning nested grid items in a higher level container (a subgrid function)
• Align child elements of different blocks
• CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
• Aligning the child elements of different parent containers
• Use flexbox display to align items within a row wrapper