css - 使用 Flexbox 对齐孙子元素

Question

我正在学习 Flexbox，但仍然不确定我是否完全理解所有部分如何组合在一起。我想垂直对齐这些列，使灰色框彼此对齐:http://codepen.io/anon/pen/EPZQZq (我更新了 Codepen HTML/CSS，以更好地反射(reflect)我的响应式布局所面临的挑战。)

一些额外的上下文:这是针对响应式网站的，因此宽度:800px可能有点误导。灰色条不能用边框代替，它们是实际内容的替代品。

代码:

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#container {
  width: 800px;
  font: 14px/22px "helvetica neue", sans-serif;
  display: flex;
}

.item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.item .blob {
  width: 100%;
  height: 20px;
  background: #dedede;
}

<div id="container">
  <div class="item">
    <h1>Title TK</h1>
    <div class="blob"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="item">
    <h1>A longer title TK TK TK</h1>
    <div class="blob"></div>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="item">
    <h1>A title that nobody could have possibly accounted for</h1>
    <div class="blob"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Answer 1

您想要控制.item h1的高度。您可以通过以下任一方式完成:

.item h1 {
   min-height: 90px;
   max-height: 90px;
}

或者， flex 盒方式:

.item h1 {
   flex-basis: 90px;
   flex-shrink: 0; /* if you don't want it to shrink */
   flex-grow: 0; /* if you don't want it to grow */
}