我有两个等高的列，我正在努力获得＆＃34;阅读更多＆＃34;无论相邻列中有多少内容，每列中的链接都位于列的底部。我正在使用align-self: flex-end，我认为它应该选择性地对齐这个单独的孩子，但它不起作用。 div高度不会以任何方式拉伸也很重要。这就是我指定align-items: flex-start;和align-content: flex-start;。
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>
答案 0 :(得分：1)
您可以在flex-direction: column
margin-top: auto和.more
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>
答案 1 :(得分：1)
align-self属性与align-items密切相关。一个旨在覆盖另一个。因此，they both function together。
但是，align-self和align-items主要在单行灵活容器中工作。
如果横轴有多行弹性项目 - 就像问题一样 - 要使用的属性为align-content。
但当align-content生效时，align-items和align-self都有限。从align-content移除.column，align-self工作正常。
实现布局的最有效方法（如果包裹行不是绝对必要的）是切换到flex-direction: column并在auto上使用.more边距。
有关auto页边距的详细信息，请参阅此处：https://stackoverflow.com/a/33856609/3597276
来自规范：
8.3. Cross-axis Alignment: the
align-itemsandalign-selfproperties
align-items设置所有Flex容器项的默认对齐方式，包括匿名弹性项。align-self允许为各个弹性项重写此默认对齐方式。8.4. Packing Flex Lines: the
align-contentproperty
align-content属性对齐Flex容器中的行 当横轴有额外的空间时，弯曲容器，类似于justify-content如何对齐主轴内的各个项目。 注意，此属性对单行Flex容器没有影响。