Flexbox 列：将多个项目对齐到顶部和底部？ [复制]

Question

我想将一组元素对齐到 flexbox 列的顶部，并将另一组元素对齐到 flexbox 列的底部——这两组元素之间只有空格。

尝试 #1

http://codepen.io/anon/pen/eNyKdg

HTML

<html>
  <body>
    <div class="page-flex-container">
      <div class="sidebar">
        <h2>sidebar</h2>
        <div class="circular"></div>
        <div class="circular"></div>
         <div class="circular"></div>

        <div class="bottom">
          align-bottom
        </div>

      </div>
      <div class="main-wrapper">
        <div class="header">header</div>
        <div class="content">content</div>
      </div>
    </div>
  </body>
</html>

SASS

html, body
  height: 100%
  width: 100%
  margin: 0

.page-flex-container
  width: 100%
  height: 100%
  display: flex
  flex-direction: row
  justify-content: flext-start
  align-items: stretch

  .sidebar
    flex: 0 0 175px
    height: 100%
    background-color: #6A1B9A
    display: flex
    flex-direction: column
    justify-content: flext-start

    .bottom
      height: 50px
      width: 100%
      background-color: red
      align-self: flex-end

  .main-wrapper
    display: flex
    flex-direction: column
    justify-content: flex-start
    height: 100%
    width: 100%

    .header
      flex: 0 0 100px
      background-color: #1E88E5

    .content
      background-color: #E1BEE7
      height: 100%


.circular
  width: 75px
  height: 75px
  border-radius: 50%
  overflow: hidden
  margin: 15px auto
  flex: none
  background-color: white

  img
    display: block
    max-width: 100%

尝试 #2

http://codepen.io/anon/pen/mJpKRv

HTML

<html>
  <body>
    <div class="page-flex-container">
      <div class="sidebar">
        <h2>sidebar</h2>
        <div class="circular"></div>
        <div class="circular"></div>
         <div class="circular"></div>

        <div class="bottom-wrapper">
          <div class="item">align-bottom</div>
        </div>      
      </div>
      <div class="main-wrapper">
        <div class="header">header</div>
        <div class="content">content</div>
      </div>
    </div>
  </body>
</html>

SASS

html, body
  height: 100%
  width: 100%
  margin: 0

.page-flex-container
  width: 100%
  height: 100%
  display: flex
  flex-direction: row
  justify-content: flext-start
  align-items: stretch

  .sidebar
    flex: 0 0 175px
    height: 100%
    background-color: #6A1B9A
    display: flex
    flex-direction: column
    justify-content: flext-start

    .bottom-wrapper
      height: 100%
      width: 100%
      display: flex
      flex-direction: row
      background-color: #BA68C8
      align-items: flex-end

      .item
        background-color: red
        height: 50px
        width: 100%

  .main-wrapper
    display: flex
    flex-direction: column
    justify-content: flex-start
    height: 100%
    width: 100%

    .header
      flex: 0 0 100px
      background-color: #1E88E5

    .content
      background-color: #E1BEE7
      height: 100%


.circular
  width: 75px
  height: 75px
  border-radius: 50%
  overflow: hidden
  margin: 15px auto
  flex: none
  background-color: white

问题

在尝试 #1 中，div“align-bottom”未与列的末尾对齐。

在尝试 #2 中，div“align-bottom”与底部对齐，但是当浏览器调整大小时，div“bottom-wrapper”可以覆盖其上方“圆形”div 的一半。我希望“底部包装” div 在调整大小时不与任何其他 div 重叠（即，它应该被推离屏幕）。

请告诉我如何在调整浏览器大小时将底部 div 对齐到列的末尾，并且不与其他 div 重叠。

Answer 1

您需要将margin-top: auto; 附加到您的.bottom 类。 这是您的分叉演示：http://codepen.io/anon/pen/aOEKga

这里有一些很好的文章：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Flex_item_considerations

相邻弹性项目的边距不会折叠。使用自动边距 吸收垂直或水平方向的额外空间，并且可以 用于对齐或分隔相邻的弹性项目。见对齐 W3C Flexible Box Layout Model specification 中的“自动”边距 了解更多详情。