将孙元素与flexbox对齐

Question

我正在学习flexbox，但仍然不确定我是否完全理解所有部件是如何装配在一起的。我想将这些列垂直对齐，以便灰色框相互对齐：http://codepen.io/anon/pen/EPZQZq（我更新了CodepenHTML/CSS，以更好地反映我的响应式布局的挑战。）

一些额外的上下文：这是针对响应的站点，因此width: 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;
}

或者，flexbox方式：

.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 */
}

Answer 2

Flexbox无法对齐或均衡不共享公共父级的项。。。所以这里没有本地的flexbox方法。

每列中的页眉都需要具有相同的高度。

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
#container {
  width: 90%;
  font: 14px/22px"helvetica neue", sans-serif;
  display: flex;
}
.item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  border: 1px solid grey;
}
.item h1 {
  height: 120px;
}
.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>