如何将 flexbox child 推到其容器的底部？答案

【问题标题】：How to push flexbox child to the bottom of its container?如何将 flexbox child 推到其容器的底部？
【发布时间】：2017-06-04 03:00:21
【问题描述】：

我正在使用 Flexbox 在面板中显示各种内容。每个面板的底部是一个图标列表。

这在Codepen Demo 中更容易可视化

还有sn-p..

* {
  font-family: sans-serif;
}

.wrapper {
  display: flex;
  align-items: flex-start;
  width: 500px;
  background-color: #F9F9F9;
  padding: 10px;
  position: relative;
}

.image {
  width: 150px;
  margin-right: 1em;
}

.row {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
}

.more {
  font-weight: bold;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 4em;
}

.ideal {
  position: absolute;
  bottom: 20px;
  right: -44px;
}

.ideal span {
  color: green;
 font-weight: bold;
  opacity: .2;
    margin-right: 4em
}

<div class="wrapper">
  <div class="image">
    <img src="http://placehold.it/150x68" alt="" />
  </div>
  <div class="row">
    <span>Text content</span>
    <span>Text content</span>
    <span>Text content</span>
    <div class="more">
      <span class="one">ICON1
      </span>
      <span class="two">ICON2</span>
      <span class="three">ICON3</span>
      <span class="four">ICON4</span>
    </div>
  </div>
  <div class="ideal"><span>ICON4</span>&lt;  ideal position</div>
</div>

目前，图标 4 环绕并到达其容器的顶部，与图标 1 对齐。我想将第 4 个图标移动到底部，使其与图标 3 对齐（理想位置以绿色显示）

代码在桌面视图中运行良好，因此理想情况下，我想要一种可以应用于媒体查询的 CSS 样式，而不是更改 HTML 结构。

我对 flexbox 还不够新，是否有一个规则可以应用于图标 4，将其强制到容器底部？

非常感谢任何帮助！

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案1】：

将margin-top: auto 添加到four 并为more 元素添加justify-content: space-around。

请看下面的演示：

* {
  font-family: sans-serif;
}
.wrapper {
  display: flex;
  align-items: flex-start;
  width: 500px;
  background-color: #F9F9F9;
  padding: 10px;
  position: relative;
}
.image {
  width: 150px;
  margin-right: 1em;
}
.row {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
}
.more {
  font-weight: bold;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 4em;
  justify-content: space-around;
}
.four {
  margin-top: auto;
}

<div class="wrapper">
  <div class="image">
    <img src="http://placehold.it/150x68" alt="" />
  </div>
  <div class="row">
    <span>Text content</span>
    <span>Text content</span>
    <span>Text content</span>
    <div class="more">
      <span class="one">ICON1
      </span>
      <span class="two">ICON2</span>
      <span class="three">ICON3</span>
      <span class="four">ICON4</span>
    </div>
  </div>
</div>

【讨论】：

谢谢一百万 :)