Flexbox: Align Between Bottom and Center

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.)

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

Using flexbox to Align content at the bottom of container horizontally

You could utilize CSS Flexbox and make .bottom a flex container to position the items in a row. Next, use justify-content to define how the flex items should be distributed along the main axis (x-direction in a row format). One option is to use justify-content: space-evenly while defining an explicit width for the parent container.

You were on the right track by making the parent div .container a flexbox in column format, the last thing it needed was to specify justify-content: space-between to define the amount of space that should be distributed between and around the flex items.

Using space-between will take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item.

Essentially, justify-content in a flexbox column layout refers to the main axis (y-direction) and how items should be aligned along this axis.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  max-width: 300px;
  min-height: 400px;
  border: 2px solid black;
  border-radius: 10%;
}

.card-top {
  position: relative;
  background-image: url(bg-pattern-card.svg);
  background-size: cover;
  width: 100%;
  height: 30%;
  border-bottom: black solid 2px;
  align-items: center;
}

.victor {
  /*margin-top: 50px;*/
  border-radius: 50%;
}

.center {
  margin-top: 35px;
}

.bottom {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  bottom: 0;
  border-top: 2px solid black;
}

.bottom p {
  color: #000;
  font-weight: 700;
}

.bottom p>span {
  color: #222;
  font-size: .8rem;
}

<div class="container">
  <div class="card-top">
    <p>
      <img class="victor" src="image-victor.jpg" alt="the homie">
    </p>
  </div>
  
  <div class="center">
    <p>
      <span>
          <b>Victor Crest</b>
          26
        </span>
    </p>
    
    <p>
      London
    </p>
  </div>

  <div class="bottom">
    <p>
      80K<br>
      <span>Followers</span>
    </p>
    
    <p>
      803K<br>
      <span>Likes</span>
    </p>
    
    <p>
      1.4K<br>
      <span>Photos</span>
    </p>
  </div>
</div>

Center one flex item and bottom-align another

Try the below instead:

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

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.

Aligning to the bottom in flexbox

You need to make the parent a flex container:

.flex-list .flex-row .flex-item-wrapper .flex-item {
    width: 100%;
    height: 100%;
    display: flex;                      /* new */
    flex-direction: column;             /* new */
}

Then, tell the .caption element to fill available height:

.caption { flex: 1; }

Revised Fiddle

It's a common question. Here are other options:

Methods for Aligning Flex Items
Flexbox align to bottom
Pin a flex item to the bottom of the container
Pin element (flex item) to bottom of container
Pin element to the bottom of the container
Pin a button to the bottom corner of a container
Aligning element to bottom with flexbox
Aligning items to the bottom using flex
Align content of flex items to bottom
Align content in a flex container to the bottom
Aligning element to bottom with flexbox
Nested flexbox, align-items do not flex-end
align-content: flex-end not shifting elements to container bottom
Sticky footer with flexbox
Why isn't align-self aligning my div to the bottom of my flexbox?
How to bottom-align an element inside a flex item?
Flexbox difficulties aligning icons to bottom of container
Make an item stick to the bottom using flex in react-native
Equal height columns and align last item to bottom

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