[FIXED] How to push flexbox child to the bottom of its container?

Issue

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

This is easier to visualise in this Codepen Demo

And snippet..

* {
  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>

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)

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.

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?

Any help much appreciated!

Solution

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

See demo below:

* {
  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>

Answered By - kukkuz

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)