将div放在父级的底部而不是绝对的

Question

我想要做的是:

HTML

<footer>
   <!-- ... -->
   <span class="copyright">abc</span>
</footer>

CSS(sass)

footer {
  // ...

  text-align: center;

    > .copyright {
        position: absolute;
        bottom: 0;
        display: inline-block;
    }       

}

因此,只需将copyrigh拉到父块的底部并将其居中.这很容易使用position: absolute,但是,使用display: inline-block子元素和text-align: center父元素的方式居中将无法工作.

是否可以在保持相对性的同时降低版权？

Answer 1

如果父级的高度已定义或可解析,Flexbox可以执行此操作.

完成 Codepen演示

footer {
  height: 150px;
  width: 80%;
  margin: auto;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
header {
  background: plum;
}
.copyright {
  margin-top: auto;
  /* push to bottom */
  background: red;
  align-self: flex-start;
  /* collapse to own width */
  margin-left: auto;
  /* centering */
  margin-right: auto;
}

<footer>
  <header>I'm a header</header>

  <span class="copyright">Copyright</span>
</footer>