Flexbox 垂直对齐顶部的一些元素，底部的一些元素

Question

我有一张我正在尝试使用 HTML/CSS 创建的图像。我对 flexbox 进行了一些研究。我不想明确设置文本 div 的高度。

我有一个我目前所在位置的 jsfiddle -http://jsfiddle.net/wxc0jmjw/1/（js 小提琴中没有图像）基本上，我只需要在容器顶部的一些文本，在底部的一些文本，以及高度根据内容的高度变化。任何帮助表示赞赏！

.flexbox-container {
  padding: 20px;
  background: #eee;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: flex-end;
}

.flexbox-vert-item {
  width: 300px;
  background: #fefefe;
  margin-right: 20px;
  padding: 10px;
}

.flexbox-vert-item2 {
  width: 300px;
  background: #fefefe;
  margin-right: 20px;
  padding: 10px;
}

.demo-wrapper {
  min-height: 500px;
}

<div class="flexbox-container">
  <div class="wrapper">
    <div class="flexbox-vert-item2">SOme text at the top</div>
    <div class="flexbox-vert-item">Blah blah 123 123 123 123 123 123 123 123 123 123 123 123     123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123     123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123     123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 </div>
  </div>

  <div class="wrapper">
    <div class="flexbox-vert-item2">SOme text at the top</div>
    <div class="flexbox-vert-item">Blah blah blah blah blah blah blah blah blah blah blah     blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
  </div>

</div>

Answer 1

对您的 CSS 进行了一些更改（为简单起见，删除了供应商前缀 flexbox 属性）。需要进行以下修改：

• 删除-webkit-align-items: center; 以允许.wrapper 填充.flexbox-container 的整个高度
• 通过将display: flex; 添加到.wrapper，使.wrapper 中的子代使用flexbox
• 通过将flex-direction: column; 添加到.wrapper，使.wrapper 中的孩子从上到下排序
• 通过将flex: 1; 添加到.flexbox-vert-item2，允许.flexbox-vert-item2 增长并占用可用空间

.flexbox-container {
  padding: 20px;
  background: #eee;
  display: flex;
}
.wrapper {
  display: flex;
  flex-direction: column;
}
.flexbox-vert-item {
  width: 300px;
  background: #fefefe;
  margin-right: 20px;
  padding: 10px;
}
.flexbox-vert-item2 {
  width: 300px;
  background: #fefefe;
  margin-right: 20px;
  padding: 10px;
  flex: 1;
}
.demo-wrapper {
  min-height: 500px;
}

<div class="flexbox-container">
  <div class="wrapper">
    <div class="flexbox-vert-item2">SOme text at the top</div>
    <div class="flexbox-vert-item">Text at the bottom Blah blah 123 123 123 123 123 123 123123 123123 123 123 123 12123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 1233123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123123 123 123 123 123123 123</div>
  </div>
  <div class="wrapper">
    <div class="flexbox-vert-item2">SOme text at the top</div>
    <div class="flexbox-vert-item">Text at the bottom Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
  </div>
</div>

JS 小提琴： http://jsfiddle.net/ek38ff5r/4/