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的完整高度
• 将.wrapper添加到display: flex;
，让.wrapper中的孩子使用flexbox
• 通过将.wrapper添加到flex-direction: column;
，让.wrapper中的孩子从上到下排序
• 通过将.flexbox-vert-item2添加到flex: 1;
，允许.flexbox-vert-item2增长并占用可用空间

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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