Flexbox列将自身与底部对齐 [英] Flexbox column align self to bottom

问题描述

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

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

I want a div to stick to the bottom of the parent div using flexbox. With flex-direction: column and align-content: Space-between i 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.

[顶部]

[中]

-

-

-

[底部]

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

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

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

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

推荐答案

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

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

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

谢谢，T04435.

这篇关于Flexbox列将自身与底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！