Question

我有一个带有方向列的弹箱，就像在这个代码中一样

https://codepen.io/anon/pen/KaBNvN?editors=1100

    <div class="container">
  <div class="header">header</div>
  <div class="content">

    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
   </div>
  <div class="footer">footer</div>

</div>


    div {
  border: 1px solid;
}
.container {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 200px;
}

.container .content {
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

.footer {
  height: 20px;
}

我希望页脚始终位于底部。

我尝试了自我辩护：为页脚提供了flex-end但它不起作用。

Answer 1

由于页脚元素是flexbox容器的直接子元素，因此最简单的选项是将元素margin-top设置为auto。这将有效地将页脚元素放在容器的底部。

Updated Example

.footer {
  height: 20px;
  margin-top: auto;
}

如果您对此工作原因感到好奇，请参阅相关规范中关于flexbox项目auto页边距的报价：

Flexible Box Layout Module - 8.1. Aligning with auto margins

弹性项目的自动边距效果与块流程中的自动边距非常相似：



在计算弹性基座和弹性长度时，自动边距被视为0。



在通过justify-content和align-self进行对齐之前，任何正的可用空间都会分配到该维度中的自动边距。

如您所见，剩余的可用空间分布在auto边距的方向上。

Answer 2

你已经在那里了，你只需要：

    div {
      border: 1px solid;
    }
    .container {
      display: flex;
      height: 300px;
      flex-wrap: wrap;
      width: 200px;
    }

    .header {
        width: 100%;
    }

    .container .content {
      overflow-y: scroll;
      flex-direction: column;
      width: 100%;
    }

    .footer {
      align-self: flex-end;
      height: 20px;
      width: 100%;
    }

柔性箱方向柱

2 个答案: