尝试＃1

Question

我想将一组元素对齐到flexbox列的顶部，将另一组元素对齐到flexbox列的底部 - 只有空格分隔两组。

尝试＃1

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＆＃34; align-bottom＆＃34;未与列的末尾对齐。

在尝试＃2中，div＆＃34; align-bottom＆＃34;与底部对齐，但是当浏览器调整大小时，div＆＃34; bottom-wrapper＆＃34;可以掩盖＆＃34;循环的一半＆＃34; div高于它。我想要＆＃34;底部包装＆＃34; 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中使用'自动'边距了解更多详情。

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

尝试＃1

尝试＃2

问题

1 个答案: