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

但是您可以通过多种方式进行操作
这是指向类似问题的链接，以多种方式对此进行解释：
Center and right align flexbox elements