html - Flexbox 垂直对齐一些元素在顶部，一些元素在底部

Question

我有一张我试图用 HTML/CSS 创建的图像。我稍微研究了一下 flexbox。我不想显式设置文本 div 的高度。

我有一个关于我目前所在位置的 jsfiddle - http://jsfiddle.net/wxc0jmjw/1/ (js fiddle 中没有图像)基本上，我只需要在容器顶部放置一些文本，在底部放置一些文本，并且高度根据内容的高度而变化。感谢您的帮助!

.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 中的 child 使用 flexbox
• 通过在 .wrapper 中添加 flex-direction: column; 使 .wrapper 中的子项从上到下排序
• 允许 .flexbox-vert-item2 增长并通过添加 flex: 1; 到 .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 fiddle : http://jsfiddle.net/ek38ff5r/4/