CSS Flexbox 列与底部对齐

Flexbox column align self to bottom

提问by Laurens Kling

Im trying to use Flexbox. http://css-tricks.com/almanac/properties/a/align-content/this shows nice alignment options; but i would actually want a Top-top-bottom situation.

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

I want a div to stick to the bottom of the parent div using flexbox. With flex-direction: columnand align-content: Space-betweeni can do this, but the middle div will align in the center, i want the middle one to be sticked to the top as well.

我想要一个 div 使用 flexbox 粘在父 div 的底部。随着flex-direction: column和align-content: Space-between我能做到这一点，但中间的div将在中心对齐，我想中间的一个被贴到顶部为好。

[top]

[最佳]

[middle]

[中间]

-

——

-

——

-

——

[bottom]

[底部]

align-self: flex-endwill make it float right, not bottom.

align-self: flex-end将使它漂浮在右侧，而不是底部。

complete flexbox docs: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

采纳答案by T04435

Basically, the answer is to give to the last of the middle elements a flex grow 1 code as follows:

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

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

Thanks, T04435.

谢谢，T04435。

回答by Torbj?rn Angeltveit

I'm a bit late to the party, but might be relevant for others trying to accomplish the same you should be able to do:

我参加聚会有点晚了，但可能与其他人试图完成您应该能够做的事情有关：

margin-top: auto

on the element in question and it should go to the bottom. Should do the trick for firefox, chrome and safari.

在有问题的元素上，它应该到底部。应该为 firefox、chrome 和 safari 解决问题。

回答by Laurens Kling

I found my own solution, i will add it here for documentation value;

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

If you give the middle block height: 100%it will take up al the room in the middle. So the bottom block will be at the actual bottom and top and middle are on top.

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

UPDATE: This doesn't work for Chrome...

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

UPDATE: Found a way that works for FF/Chrome: setting flex-growon a higher number (1 is enough) for [middle] will make it take full middle size. more info: http://css-tricks.com/almanac/properties/f/flex-grow/

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

回答by Mario Vázquez

align selfproperty rely on the alignment of an item in respect of the cross axis, not the main axis. So this is not the way to go. You have several options to achieve that using flexbox, though:

align self属性依赖于项目相对于横轴的对齐，而不是主轴。所以这不是要走的路。不过，您有多种选择可以使用 flexbox 实现这一点：

1) Use flex-grow:1 on your middle item. This will make it grow taking all remaining space in the container, thus pushing your last div to the bottom.

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

2) Refactor your layout so that there is a main div with justify-content:space-betweenso that your last div will be sticked to the bottom:

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) This is a bit weird, but you could even do that using align-selfbut inverting the flex direction and allowing items to wrap:

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
}

I've tested all this out using this free flexbox designer: http://algid.com/Flex-Designer

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

回答by Sebe

I know this is a old post but the same problem, with Flexbox's single axis alignment, made me nuts for an hour.

我知道这是一篇旧帖子，但同样的问题，Flexbox 的单轴对齐，让我疯狂了一个小时。

The auto margin is a nice trick but i wanted to share my solution with CSS Grid.

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

The importantpart is the definition of the grid-template-rows. With autothe rows have the same height as the content and 1fruses the remaining space for the middle row.

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

Here a nice overview about CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

这里有一个关于 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>

回答by Jorge Monte

Considering that your website has a basic structure, here's a solution that I used and applied in a similar situation, with just a few lines of code:

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

HTML

HTML

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

CSS

CSS

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

footer{
    margin-top: auto;
}