Flexbox выравнивает один элемент по центру, а другой внизу страницы

Question

У меня есть следующая боковая панель

Здесь я хочу добиться того, чтобы логотип был центрирован, а авторское право - внизу страницы.

Вот что у меня есть:

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

Answer 1

flex-direction: column

Основная проблема (помимо некоторого неправильного синтаксиса для фонового сокращения) заключается в том, что по умолчанию flex-direction имеет значение row (по горизонтали).Гибкие элементы (.logo и .copy) сложены вертикально, поэтому flex-direction должно быть column.

---

Демо

Подробности прокомментированы в демо

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>

Answer 2

вы можете использовать position.
Добавить position:relative; к .inner_content
и position:absolute; и bottom:0; к .inner_content p

, чтобы ваш 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;
  position: relative;
}

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

но вы можете сделать это несколькими способами
вот ссылка на аналогичный вопрос, объясняющий это несколькими способами:
элементы flexbox по центру и по правому краю