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

Question

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

Answer 1

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>