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

Question

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

我想将一组元素对齐到 Flexbox 列的顶部，将另一组元素对齐到 Flexbox 列的底部 - 仅用空间分隔这两组元素。

尝试#1

超文本标记语言

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

Run Code Online (Sandbox Code Playgroud)

萨斯

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%

Run Code Online (Sandbox Code Playgroud)

尝试#2

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

超文本标记语言

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

Run Code Online (Sandbox Code Playgroud)

萨斯

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

Run Code Online (Sandbox Code Playgroud)

问题

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

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

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

Answer 1

Nic*_*o O 5

您需要附加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 灵活框布局模型规范中的“自动”边距对齐。

归档时间：	10 年，10 月前
查看次数：	6123 次
最近记录：	10 年，10 月前