将孙元素与 flexbox 对齐

Question

我正在学习 flexbox，但仍然不确定我是否完全理解所有部分是如何组合在一起的。我想垂直对齐这些列，以便灰色框彼此对齐：http://codepen.io/anon/pen/EPZQZq（我更新了 Codepen HTML/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 无法对齐或均衡 不共享公共 parent 的项目...因此此处没有原生 flexbox 方法。

header 每列的高度必须相同。

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>

将孙元素与 flexbox 对齐

Aligning grandchild elements with flexbox

css

flexbox