Move single element to the end of a flex container - css

Question

I thought that I'd be able to shift this single button to the end of a flex-box.
I have set the parent to be a display: flex; and then I thought that I'd be able to target one element and pin it to the bottom of the container with align-self: flex-end;
It doesn't work. Here is my pen: My Codepen illustrating the issue
<div class="row services">
<div class="small-3 panel columns service">
<i class="fa fa-thumbs-o-up"></i>
<h3>SUSPENDISSE</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-key"></i>
<h3>MAECENAS</h3><p>Porro quibusdam nostrum eaque, quasi laudantium delectus quaerat cumque, quos.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-flag"></i>
<h3>ALIQUAM</h3><p>Iste architecto omnis, esse facere quod ratione, officia veritatis fugit.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-flask"></i>
<h3>HABITASSE</h3><p>Ducimus voluptates assumenda, illum adipisci sed quaerat est ipsum nisi.</p>
<div class="button">Read More</div>
</div>
</div>
.services {
display: flex;
}
.service {
flex-direction: column;
}
.button {
align-self: flex-end;
}

Answer 1

align-self will only work with direct child elements of a flex parent, so:
Make .service a flex parent with display: flex and set flex-wrap: wrap
Center the button with margin: 0 auto
Working Example
Also available as a Codepen.
.services {
display: flex;
}
.service {
display: flex;
flex-wrap: wrap;
}
.button {
align-self: flex-end;
margin: 0 auto !important;
/* !important used for this example only to override foundation.css*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row services">
<div class="small-3 panel columns service">
<i class="fa fa-thumbs-o-up"></i>
<h3>SUSPENDISSE</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-key"></i>
<h3>MAECENAS</h3><p>Porro quibusdam nostrum eaque, quasi laudantium delectus quaerat cumque, quos.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-flag"></i>
<h3>ALIQUAM</h3><p>Iste architecto omnis, esse facere quod ratione, officia veritatis fugit.</p>
<div class="button">Read More</div>
</div>
<div class="small-3 panel columns service">
<i class="fa fa-flask"></i>
<h3>HABITASSE</h3><p>Ducimus voluptates assumenda, illum adipisci sed quaerat est ipsum nisi.</p>
<div class="button">Read More</div>
</div>
</div>