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

Question

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

中更容易形象化

和片段..

* {
  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 以强制它位于容器底部？

非常感谢任何帮助！

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

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

How to push flexbox child to the bottom of its container?

html

css

vertical-alignment

flexbox