使用flexbox

Question

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

一些额外的上下文：这是针对响应的网站，因此width: 800px可能会有点误导。并且灰色条不能被边框替换，它们本身就是实际内容的替身。

代码：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>