Flexbox如何使某些元素垂直居顶部，某些元素垂直居底部

Question

Flexbox如何使某些元素垂直居顶部，某些元素垂直居底部

4

我有一个用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>

Diagram of what I'm trying to create

- Tom

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hidden Hobbes · Answer 1

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

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

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

JS Fiddle：{{link1：http://jsfiddle.net/ek38ff5r/4/}}