如何将flexbox孩子推到其容器底部？ [英] How to push flexbox child to the bottom of its container?

问题描述

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

I'm using Flexbox to display various content in a panel. At the bottom of each panel is a list of icons.

这在此 Codepen演示

和片段..

* {
  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（理想位置以绿色显示）对齐。

Currently, icon 4 wraps around and goes to the top of its container, lining up with icon 1. I would like to move the 4th icon to the bottom, so it lines up with icon 3 (ideal position seen in green)

代码在桌面视图中效果非常好，所以理想情况下，我想要一个CSS样式，我可以应用媒体查询，而不是改变HTML结构。

The code works great in the desktop view, so ideally I'd like a CSS style I can apply with a media query, as opposed to changing the HTML structure.

我对flexbox有足够的新，是否有一个规则我可以​​应用到图标4，这将强制它到容器的底部？

I'm new enough to flexbox, is there a rule I could apply to icon 4 that will force it to the bottom of the container?

任何帮助非常感谢！

推荐答案

将 margin-top：auto 添加到 four ，并为更多元素引入 justify-content：space- around

Add margin-top: auto to four and throw in justify-content: space-around for the more element.

查看以下演示：

* {
  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孩子推到其容器底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！