Question

我试图使用Flexbox。 http://css-tricks.com/almanac/properties/a/align-content/这显示了很好的对齐选项;但我真的想要一个自上而下的情况。

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

[顶端]

[中间]

-

[底部]

align-self: flex-end会让它浮动，而不是底部。

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

Answer 1

我参加聚会有点晚了，但是对于其他人来说可能是有用的，你应该能够做到这一点：

margin-top: auto

有问题的元素，它应该到底部。应该为firefox，chrome和safari做点诀。

Answer 2

基本上，答案是给最后一个中间元素一个flex增长1代码如下：

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

谢谢，T04435。

Answer 3

我找到了自己的解决方案，我会在此处添加文档值;

如果你给中间区块height: 100%它将占据中间的房间。所以底部块将位于实际底部，顶部和中间位于顶部。

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

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

Answer 4

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

Answer 5

我知道这是一篇过时的文章，但是Flexbox的单轴对齐导致了一个小时的发疯。

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

重要部分是 grid-template-rows 的定义。使用自动时，行与内容具有相同的高度，并且 1fr 将剩余的空间用于中间行。

关于CSS网格，这里有一个很好的概述： 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>

Answer 6

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

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

Answer 7

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

Flexbox列自对齐到底部

7 个答案: