[英]Why isn't align-self aligning my div to the bottom of my flexbox?
I have two equal-height columns and I am trying to get the "Read More" link in each column to sit at the bottom of the column, no matter how much content is in the adjacent column. 我有两个等高的列,并且不管相邻列中有多少内容,我都试图使每个列中的“阅读更多”链接位于列的底部。 I am using
align-self: flex-end
, which I think is supposed to selectively align this single child, but it isn't working. 我正在使用
align-self: flex-end
,我认为它应该有选择地对齐这个单身孩子,但它不起作用。 It is also important that the div heights are not stretched in any way. 同样重要的是,div高度不能以任何方式拉伸。 That is why I have specified
align-items: flex-start;
这就是为什么我指定
align-items: flex-start;
and align-content: flex-start;
和
align-content: flex-start;
. 。
https://jsfiddle.net/stewx/b2aoksgf/2/ https://jsfiddle.net/stewx/b2aoksgf/2/
h3, p { width: 100%; border: 1px solid blue; } div { padding: 5px; } .outer-container { display: flex; border: 1px solid black; padding: 5px; } .column { border: 1px solid red; display: flex; flex-wrap: wrap; flex-direction: row; width: 50%; align-content: flex-start; } .more { border: 1px dashed green; font-weight: bold; text-align: right; align-self: flex-end; /* Has no effect. I would have expected this to move to the bottom. */ }
<div class="outer-container"> <div class="column"> <h3> Foo </h3> <p> The top of this paragraph should be aligned with the top of the paragraph in the other column.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper urna. Donec convallis lorem ut semper ultrices. Integer feugiat sodales leo. Sed non lacus sed nisi semper eleifend. Maecenas ultricies condimentum tempor. Fusce vel aliquet magna, nec sollicitudin nunc. Fusce ut facilisis lorem. Vestibulum porttitor vehicula mi, in bibendum ante ultrices sit amet. Nulla at dui tempor, ornare risus eu, lobortis lorem. </p> <p class="more"><a href="#">Read More (I should be at the bottom of this div!)</a></p> </div> <div class="column"> <h3> Bar </h3> <p> The top of this paragraph should be aligned with the top of the paragraph in the other column.</p> <p> Vivamus porttitor pharetra eros quis maximus. Sed non blandit justo. Phasellus viverra tellus eu diam tempor pretium. Nam iaculis odio non quam iaculis, sit amet vehicula ipsum scelerisque. Nunc ornare augue quis congue finibus. Curabitur efficitur magna a fringilla convallis. Nulla nunc mauris, dignissim sit amet arcu sit amet, pellentesque condimentum sapien. </p> <p> Donec tellus purus, sodales non pellentesque a, accumsan ut orci. Vivamus a tincidunt odio, nec fringilla nulla. Nulla eu metus felis. Vivamus dictum accumsan ante pellentesque dapibus. Donec neque orci, congue pretium leo quis, tempor aliquam justo. Sed elementum cursus mauris vel consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius, ante in fermentum condimentum, lorem urna vulputate justo, nec maximus lectus leo sodales lectus. In nec orci mollis, varius ante id, faucibus ipsum. Etiam auctor a mi semper egestas. Morbi tincidunt at nunc non semper. Sed mattis tellus ex, in consequat leo facilisis id. Vivamus eleifend pellentesque tempus. </p> <p class="more"> <a href="#">Read More</a> </p> </div> </div>
You can use flex-direction: column
and margin-top: auto
on .more
您可以在
.more
上使用flex-direction: column
和margin-top: auto
h3, p { width: 100%; border: 1px solid blue; } div { padding: 5px; } .outer-container { display: flex; border: 1px solid black; padding: 5px; } .column { border: 1px solid red; display: flex; flex-wrap: wrap; flex-direction: column; width: 50%; align-items: flex-start; } .more { border: 1px dashed green; font-weight: bold; text-align: right; margin-top: auto; /* Has no effect. I would have expected this to move to the bottom. */ }
<div class="outer-container"> <div class="column"> <h3> Foo </h3> <p> The top of this paragraph should be aligned with the top of the paragraph in the other column.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper urna. Donec convallis lorem ut semper ultrices. Integer feugiat sodales leo. Sed non lacus sed nisi semper eleifend. Maecenas ultricies condimentum tempor. Fusce vel aliquet magna, nec sollicitudin nunc. Fusce ut facilisis lorem. Vestibulum porttitor vehicula mi, in bibendum ante ultrices sit amet. Nulla at dui tempor, ornare risus eu, lobortis lorem. </p> <p class="more"><a href="#">Read More (I should be at the bottom of this div!)</a></p> </div> <div class="column"> <h3> Bar </h3> <p> The top of this paragraph should be aligned with the top of the paragraph in the other column.</p> <p> Vivamus porttitor pharetra eros quis maximus. Sed non blandit justo. Phasellus viverra tellus eu diam tempor pretium. Nam iaculis odio non quam iaculis, sit amet vehicula ipsum scelerisque. Nunc ornare augue quis congue finibus. Curabitur efficitur magna a fringilla convallis. Nulla nunc mauris, dignissim sit amet arcu sit amet, pellentesque condimentum sapien. </p> <p> Donec tellus purus, sodales non pellentesque a, accumsan ut orci. Vivamus a tincidunt odio, nec fringilla nulla. Nulla eu metus felis. Vivamus dictum accumsan ante pellentesque dapibus. Donec neque orci, congue pretium leo quis, tempor aliquam justo. Sed elementum cursus mauris vel consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius, ante in fermentum condimentum, lorem urna vulputate justo, nec maximus lectus leo sodales lectus. In nec orci mollis, varius ante id, faucibus ipsum. Etiam auctor a mi semper egestas. Morbi tincidunt at nunc non semper. Sed mattis tellus ex, in consequat leo facilisis id. Vivamus eleifend pellentesque tempus. </p> <p class="more"> <a href="#">Read More</a> </p> </div> </div>
The align-self
property is closely related to align-items
. align-self
属性与align-items
密切相关。 One is designed to override the other. 一个旨在替代另一个。 Hence, they both function together .
因此, 它们都一起起作用 。
However, align-self
and align-items
work primarily in single-line flex containers . 但是,
align-self
和align-items
主要在单行flex容器中工作 。
When there are multiple rows of flex items in the cross-axis – like in the question – the property to use is align-content
. 当跨轴的弹性项目有多行时(例如在问题中),要使用的属性是
align-content
。
But when align-content
is in effect, both align-items
and align-self
are limited. 但是,当
align-content
有效时, align-items
和align-self
都受到限制。 Remove align-content
from .column
and align-self
works fine. 从
.column
删除align-content
,并且align-self
可以正常工作。
The most efficient way to achieve your layout (if wrapping rows aren't absolutely necessary) is to switch to flex-direction: column
and use an auto
margin on .more
. 实现布局的最有效方法(如果不是绝对需要换行)是切换到
flex-direction: column
并在.more
上使用auto
边距。
For more details on auto
margins see here: https://stackoverflow.com/a/33856609/3597276 有关
auto
保证金的更多详细信息,请参见此处: https : //stackoverflow.com/a/33856609/3597276
From the spec: 从规格:
8.3.
8.3。 Cross-axis Alignment: the
align-items
andalign-self
properties跨轴对齐:
align-items
和align-self
属性
align-items
sets the default alignment for all of the flex container's items, including anonymous flex items.align-items
设置所有伸缩容器的项目(包括匿名伸缩项目)的默认对齐方式。align-self
allows this default alignment to be overridden for individual flex items.align-self
允许针对单个弹性项目覆盖此默认对齐方式。8.4.
8.4。 Packing Flex Lines: the
align-content
property包装伸缩线:
align-content
属性The
align-content
property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to howjustify-content
aligns individual items within the main-axis.当横轴上有多余的空间时,
align-content
属性将伸缩容器内的行对齐在伸缩容器内,类似于justify-content
在主轴内对齐单个项目的方式。 Note, this property has no effect on a single-line flex container.注意,此属性对单行flex容器无效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.