logo标签列表

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

cssflexbox
4

我想将一组元素对齐到 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" 可能会覆盖其中一半的上面的 "circular" div。我希望 "bottom-wrapper" div 在调整大小时不会重叠任何其他 div（即，它应该被推出屏幕）。

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

1个回答
5

你需要在你的 .bottom 类中添加 margin-top: auto;。 这里是你的 forked demo: http://codepen.io/anon/pen/aOEKga

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

相邻弹性元素的边距不会折叠。使用自动边距可吸收垂直或水平方向上的额外空间，可用于对齐或分隔相邻的弹性元素。查看W3C 弹性盒布局模型规范 中的“使用 'auto' 边距进行对齐”以获取更多详细信息。

那个 "margin-top: auto" 每次都让我困扰。 - SergioL
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接