Flexbox列将自身与底部对齐

我正在尝试使用Flexbox。http://css-tricks.com/almanac/properties/a/align-content/这显示了不错的对齐选项；但是我实际上想要一个自上而下的情况。

我希望使用flexbox将div粘贴到父div的底部。使用flex-direction: column和align-content: Space-between我可以做到这一点，但是中间的div将在中心对齐，我也希望中间的div也要贴在顶部。

[最佳]

[中间]

--

--

--

[底部]

align-self: flex-end 将使其向右浮动，而不是向底部浮动。

完整的flexbox文档：http ://css-tricks.com/snippets/css/a-guide-to-flexbox/

基本上，答案是给flex的1个中间元素赋予如下代码：

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

谢谢，T04435。

我参加聚会有点晚了，但可能与其他人想要达成的目标有关：

margin-top: auto

在有问题的元素上，它应该移到底部。应该为Firefox，Chrome和Safari做好准备。

我找到了自己的解决方案，我将在此处添加其以获得文档价值；

如果给中间块height: 100%，它将占据整个中间的空间。因此，底部的块将位于实际底部，顶部和中间位于顶部。

更新：这不适用于Chrome ...

更新：找到了一种适用于FF / Chrome的方法：将flex-grow[middle]设置为更大的数字（1足够）将使其变为中等大小。更多信息：http : //css-tricks.com/almanac/properties/f/flex-grow/

align self属性取决于项相对于横轴而不是主轴的对齐方式。所以这不是要走的路。但是，您可以通过几种方法使用flexbox实现此目的：

1）在中间项目上使用flex-grow：1。这将使其增长，并占用容器中的所有剩余空间，从而将最后一个div推到底部。

2）重构布局，以便有一个主要的div，justify-content:space-between以便最后一个div停留在底部：

.container{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.body{
    display:flex;
    flex-direction:column;
}
.bottom{
    /* nothing needed for the outer layout */
}

<div class="container">
    <div class="body">
        <div>top content</div>
        <div>middle content</div>
    </div>
    <div class="bottom">
        bottom content
    </div>
</div>

3）这有点奇怪，但是您甚至可以使用align-self但反转flex方向并允许包装的东西来做到这一点：

.container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.body{
    display:flex;
    flex-direction:column;
    flex-basis:100%;
}
.bottom{
    align-self:flex-end
}

我已经使用免费的flexbox设计器对所有这些进行了测试：http：//algid.com/Flex-Designer

我知道这是一个老帖子，但是由于Flexbox的单轴对齐，同样的问题使我发疯了一个小时。

自动边距是一个不错的技巧，但我想与CSS Grid共享我的解决方案。

的重要部分是定义网格模板行。使用auto时，行的高度与内容的高度相同，1fr将剩余的空间用于中间行。

这里是关于CSS Grid的很好的概述：https : //css-tricks.com/snippets/css/complete-guide-grid/

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 1em;
  justify-content: center;
}

.top {
  height: 2em;
  width: 10em;
  background-color: blue;
}

.middle {
  height: 3em;
  width: 10em;
  background-color: green;
}

.bottom {
  height: 2em;
  width: 10em;
  background-color: red;
}

<div class="container">
  <div class="top">
    <p>TOP</p>
  </div>
  <div class="middle">
    <p>MIDDLE</p>
  </div>
  <div class="bottom">
    <p>BOTTOM</p>
  </div>
</div>

考虑到您的网站具有基本结构，这是我在类似情况下使用和应用的一种解决方案，只需几行代码：

的HTML

<div class="site-container">
    <header>your header</header>
    <main>your main with little content</main>
    <footer>your footer</footer>
</div>

的CSS

.site-container{
    min-height: 100vh;   //not necessary to calculate the height of the footer
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;
}

.message-container {
    display: flex;
    flex-direction: column;
    place-content: flex-end;
    height: -webkit-fill-available;
}

.message {
    display: table-cell;
}

尝试这个。我用它来做信使。

.container {
  height: 400px;
}

.message-container {
    display: flex;
    background: #eee;
    flex-direction: column;
    place-content: flex-end;
    height: -webkit-fill-available;
}

.user-message {
    align-self: flex-start;
    display: table-cell;
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    background-color: rgba(154, 247, 200, 0.692);
}

.friend-message {
    align-self: flex-end;
    display: table-cell;
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    background-color: rgba(169, 207, 250, 0.692);
}

<div class='container'>
  <div class='message-container'>
    <div class='user-message'>Hello!</div>
    <div class='friend-message'>Hi.</div>
  </div>
</div>