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

您可以使用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

Answer 2

flex-direction: column

主要的问题(除了背景速记上的一些错误语法)是默认的flex-direction，即row (水平的)。flex项(.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>

​