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

Question

I have the following sidebar

What I want to achieve here is have the logo centered and the copyright at the bottom of the page.

Here is what I have so far:

HTML

<aside class="flex">
  <div class="flex inner_content">
    <img src="./img/logo.svg" alt="Logo">
    <p>&copy; copyright 2018</p>
  </div>
</aside>

CSS

.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;
}

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

score 3 · Answer 1 · answered Oct 15 '18 at 16:11

`flex-direction: column`

The major problem (besides some bad syntax on background shorthand) is that the flex-direction was at default which is row (horizontal). The flex items (.logo and .copy) are stacked vertically thus the flex-direction should be column.

Demo

Details commented in demo

html,
body {
  /* Always set the font on html */
  font: 700 16px/1.5 Verdana;
  width: 100%;
  height: 100%;
}

.flex {
  /* 
  shorthand for background goes in this order:
  position (center) repeat (no-repeat) size (cover)
  and there's no slash "/"
  *//* 
  no-repeat is the only one kept 
  */
  background: url('https://i.imgur.com/5OLUUfp.png')no-repeat;
  /*
  The sidebar is always top to bottom 
  */
  min-height: 100%;
  /*
  The width was 100vw which is 100% of viewport which I'm assuming
  is wrong since a sidebar should only cover a portion of the
  viewport.
  */
  width: 320px;
  /* 
  By default flex-direction is row (horizontal flow)
  */
  display: flex;
  /* 
  The flex items (.logo and .copy) are vertical, so the flex-
  direction should be column. flex-flow is a combination of
  flex-direction and flex-wrap
  */
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.logo {
  /*
  This pushes the footer.copy down to the bottom
  */
  margin: auto;
}

img {
  display: block;
  width: 90%;
}

.copy {
  font-size: 0.875rem;
  color: #FFF;
  /* 
  This property is given to individual tags that will break
  away from vertical flow of align-items
  */
  align-self: flex-end;
  margin-right: 10px
}

<aside class="flex">
  <figure class="logo">
    <img src="https://i.imgur.com/cx6bov9.png">
  </figure>

  <footer class='copy'>&copy; copyright 2018</footer>
</aside>

This should be the accepted answer because it's using strictly flexbox and not absolutely positioning one item like the currently accepted answer is doing. The trick is to have margin: auto; on the logo here. Also, .copy should be justify-self: flex-end; not align-self as we're in flex direction column. — Michael Giovanni Pumo, May 12 '21 at 13:33
Thanks @MichaelGiovanniPumo but I don't think [`justify-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#there_is_no_justify-self_in_flexbox) can be used in a flexbox layout — zer00ne, May 12 '21 at 15:52
this is the answer. margin:auto as michael says! thanks zer00ne! — Jacob Raccuia, Dec 15 '21 at 06:05

score 0 · Accepted Answer · answered Oct 15 '18 at 15:11

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

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

2 Answers2

flex-direction: column

Demo

`flex-direction: column`