使用flexbox链接应该在同一行

Question

在下面的代码中，我希望所有三个框具有相同的高度，并且三个框中的链接应该在同一行中，如下面的屏幕截图所示。我使用flexbox来做这件事。请帮忙。

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 35px;
  padding-bottom: 35px;
  background-color: pink;
}

.wrapper div:not(:last-child) {
  border-right: 1px solid #fdfdfd;
}

.wrapper div {
  flex-basis: 33%;
  text-align: center;
  padding: 10px 4%;
}

＆＃13;

<div class="wrapper">
  <div>
    <span>Heading1</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
    <a href="">Link1</a>
  </div>

  <div>
    <span>Heading2</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>

    <a href="">Link2 </a>
  </div>

  <div>
    <span>Heading3</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
    <a href="">Link3</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从包装中移除align-items: flex-start;，提供div display: flex; flex-direction: column;，并在链接上设置margin-top: auto

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;      
  padding-top: 35px;
  padding-bottom: 35px;
  background-color: pink;
}

.wrapper div:not(:last-child) {
  border-right: 1px solid #fdfdfd;
}

.wrapper div {
  flex-basis: 33%;
  text-align: center;
  padding: 10px 4%;
  display: flex;                       /*  added property  */
  flex-direction: column;              /*  added property  */
}

.wrapper div a {                       /*  added rule      */
  margin-top: auto;
}

＆＃13;

<div class="wrapper">
  <div>
    <span>Heading1</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
    <a href="">Link1</a>
  </div>

  <div>
    <span>Heading2</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>

    <a href="">Link2 </a>
  </div>

  <div>
    <span>Heading3</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
    <a href="">Link3</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  padding-top: 35px;
  padding-bottom: 35px;
  background-color: pink;
}

.wrapper div:not(:last-child) {
  border-right: 1px solid #fdfdfd;
}

.wrapper div {
  display: flex;
  flex-basis: 33%;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 10px 4%;
}

.wrapper div a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

＆＃13;

<div class="wrapper">
  <div>
    <span>Heading1</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
    <a href="">Link1</a>
  </div>

  <div>
    <span>Heading2</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>

    <a href="">Link2 </a>
  </div>

  <div>
    <span>Heading3</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
    <a href="">Link3</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;