Center and Bottom-Align Flex Items

Align an element to centre bottom of each flexbox

Here are two methods:

Nested Flexbox

.col {
    flex: 1;
    display: flex;                 /* create nested flex container */
    flex-wrap: wrap;               /* enable flex items to wrap */ 
    justify-content: center;       /* center flex items on each line */
}

.col > a { align-self: flex-end; } /* position link always at bottom */

DEMO 1

Absolute Positioning

.col {
    flex: 1;
    position: relative;      /* establish containing block (nearest positioned ancestor)
                                for absolute positioning */
}

.col > a {
    position: absolute;
    bottom: 5px;                 /* adjust this value to move link up or down */
    left: 50%;                   /* center link horizontally */
    transform: translateX(-50%); /* center link horizontally */
}

DEMO 2

A third method involves switching the flex-direction to column. In some cases, however, changing the flex direction isn't an acceptable option, as it changes the behavior of the layout. (This method isn't detailed here as it is already posted in another answer.)

Center and bottom-align flex items

Below are five options for achieving this layout:

CSS Positioning
Flexbox with Invisible DOM Element
Flexbox with Invisible Pseudo-Element
Flexbox with flex: 1
CSS Grid Layout

Method #1: CSS Positioning Properties

Apply position: relative to the flex container.

Apply position: absolute to the green flex item.

Now the green square is absolutely positioned within the flex container.

More specifically, the green square is removed from the document flow but stays within the bounds of the nearest positioned ancestor.

Use the CSS offset properties top, bottom, left and right to move the green square around.

flex-container {  display: flex;  justify-content: center;  align-items: center;  flex-wrap: nowrap;  position: relative;  border: 4px solid blue;  height: 300px;  width: 300px;}flex-container > flex-item:first-child {  display: flex;}flex-container > flex-item:first-child > flex-item {  border: 4px solid aqua;  height: 50px;  width: 50px;  margin: 0 5px;}flex-container > flex-item:last-child {  position: absolute;  bottom: 40px;  left: 50%;  transform: translateX(-50%); /* fine tune horizontal centering */  border: 4px solid chartreuse;  height: 50px;  width: 50px;}

<flex-container>    <flex-item><!-- also flex container -->     <flex-item></flex-item>     <flex-item></flex-item>     <flex-item></flex-item>    </flex-item>    <flex-item></flex-item></flex-container>

Flexbox: Align between bottom and center?

You can try this layout:

Anonymous element with flex: 1
The title and subtitle (titles)
Element with flex: 1 and display: flex.

The elements above and below the title will take available space left by titles in equal amounts. So the titles will become centered.

Those elements can also be flex containers, and you can align their contents inside them as desired.

html, body {height: 100% } * { margin: 0; }.aligner, .below {  display: flex;  justify-content: center;  flex-direction: column;  align-items: center;}.aligner {  height: 100%;}.aligner::before { content: ''; }.aligner::before, .below {  flex: 1;}

<div class="aligner">  <h3>SUPERMAN</h3>  <p>FTW</p>  <div class="below">    <button>BUTTON</button>  </div></div>

Center one flex item and bottom-align another

Try the below instead:

.box  {    background:goldenrod;    height: 30px;    width: 30px;    margin: auto;  }

Align content of flex items to bottom

Make the children flex-containers as well.. then align accordingly

.container {  height: 100px;  background: BurlyWood;  display: flex;}
.item{  flex:1;  margin: 4px;  background: Crimson;  display: flex;  justify-content: center;  align-items: flex-end;}
.item p {  margin: 0;  text-align: center;}

<div class="container">  <div class="item">    <p>lorem</p>  </div>    <div class="item">    <p>ipsum</p>  </div>    <div class="item">    <p>dolor</p>  </div></div>

align flex child at top-center and bottom-center, flexbox

What you are looking for is justify-content: space-between; to align the items until the corners.
Add that to the .container and there you go.

.container{
    /*justify-content: center;*/
    justify-content: space-between;
}

On .item-4 you have align-self: flex-start; but you don't need that. just remove it.

https://jsfiddle.net/q5cw4xvy/2/

To better help you understand flexbox, there is a really nice css-tricks article.

Align an element to bottom with flexbox

You can use auto margins

Prior to alignment via justify-content and align-self,
any positive free space is distributed to auto margins in that
dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {  height: 200px;  border: 1px solid;  display: flex;  flex-direction: column;}h1, h2 {  margin: 0;}a {  margin-top: auto;}

<div class="content">  <h1>heading 1</h1>  <h2>heading 2</h2>  <p>Some text more or less</p>  <a href="/" class="button">Click me</a></div>

Flexbox align one element center and another at the bottom of the page

you can use position.

Add position:relative; to .inner_content

and position:absolute; and bottom:0; to .inner_content p

so your css looks like this

.flex {
  align-items: center;
  display: flex;
}

aside {
  background: url('../img/sidebar-image.jpg') no-repeat center/cover;
  height: 20em;
  width: 100vw;
  float: left;
}

.inner_content {
  justify-content: center;
  flex-direction: column;
  height: inherit;
  width: inherit;
  position: relative;
}

.inner_content p {
  font-size: 14px;
  margin-top: 2em;
  color: #FFF;
  position: absolute;
  bottom:0;
}

but you can do this in multiple ways

here is a link to a similar question explaining this in multiple ways:

Center and right align flexbox elements

Bottom-align text in a flex item

You have the "buttons" set to column-direction flex containers:

.service-square-row .span4  {
    display: flex;
    flex-direction: column;
}

But the first child (flex item) of the container is set to flex-grow: 0, which is the default setting. So the h3 text has a limited range of motion.

Try this instead:

.span4 > .flex-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: green;
}

.service-square-row .service-square p:last-child {
    /* margin-top: auto; */
    margin-bottom: 30px;
    text-align: center;
}

revised codepen

div.row {  width: 100%;  float: left;  background-repeat: no-repeat !important;}
a {  color: #337ab7;  text-decoration: none;}
.service-square-row .span4,.service-square-row .span3,.service-square-row .span6 {  display: flex;  flex-direction: column;}
.service-square-row .wrapper {  display: flex;  justify-content: space-evenly;  flex-wrap: wrap;}
.services.service-square-row .span4 {  width: 260px;  border-radius: 3px;  margin: 10px;  position: relative;  background: #013ca6;  max-width: 260px;  height: 300px;}
.service-square p:first-child {  margin-top: 15px;  height: 126px;}
.service-square-row .flex-link .span4 img,.service-square-row .flex-link .span3 img {  max-height: 126px;}
img {  vertical-align: middle;}
img,video {  height: auto;  max-width: 100%;}
.service-square-row .flex-link img,.service-square-row .flex-link img {  height: 126px;  width: 126px}
.service-square-row h3 {  margin-top: auto;  font-size: 20px;  width: 95%;  padding: 0;  margin-left: 2.5%;  margin-right: 2.5%;  color: white;  text-transform: uppercase;  font-weight: 400;  font-size: 25px;}
.service-square-row .service-square p:last-child {  /* margin-top: auto; */  margin-bottom: 30px;  text-align: center;}
a.btn-bt.default,a.btn-bt.alternate {  font-weight: 400;  border-radius: 4px;  text-transform: uppercase;  text-align: center;  letter-spacing: 0;  padding: 10px 50px;}
a.btn-bt.alternate {  color: #ffffff;  font-size: 14px;  background: #e31d1a;  letter-spacing: px;}
.span4>.flex-link {  flex: 1;  display: flex;  flex-direction: column;  justify-content: space-between;  background-color: green;  /* demo only; illustrates full range of element */}

<div class="row three-thirds services service-square-row  default-padding light-header light-content" style="">
  <div class="wrapper">    <a class="flex-link" href="/electronics-restoration/">      <div class="span4 service-square sq-1 service-1" style="border-style:;">        <p style="text-align: center;"><img class="alignnone size-full wp-image-484" src="https://via.placeholder.com/120x120" alt="" width="120" height="120"></p>
        <h3 style="text-align: center;">Electronics</h3>        <p style="text-align: center;"><a class="btn-bt alternate" href="/electronics-restoration/">Learn More</a></p>      </div>    </a>    <a class="flex-link" href="/art-and-document-recovery/">      <div class="span4 service-square sq-2 service-2" style="border-style:;">        <p style="text-align: center;"><img class="alignnone size-full wp-image-485" src="https://via.placeholder.com/120x120" alt="" width="106" height="139"></p>
        <h3 style="text-align: center;">Art & Document Recovery</h3>        <p style="text-align: center;"><a class="btn-bt alternate" href="/art-and-document-recovery/">Learn More</a></p>      </div>    </a>    <a class="flex-link" href="#">      <div class="span4 service-square sq-3 service-3" style="border-style:;">        <p style="text-align: center;"><img class="alignnone size-full wp-image-486" src="https://via.placeholder.com/120x120" alt="" width="140" height="143"></p>
        <h3 style="text-align: center;">Wind, Hurricane, & Tornado</h3>        <p style="text-align: center;"><a class="btn-bt alternate" href="#">Learn More</a></p>      </div>    </a>  </div></div>