html - 为什么align-self 没有将我的div 与 flex 盒的底部对齐？

Question

我有两个等高的列，我试图让每列中的“阅读更多”链接位于该列的底部，无论相邻列中有多少内容。我正在使用 align-self: flex-end，我认为它应该有选择地对齐这个单个子项，但它不起作用。同样重要的是 div 高度不得以任何方式拉伸(stretch)。这就是为什么我指定了 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>

Answer 1

您可以在 .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>