Question

我有一系列使用flexbox的卡片，我希望将底部元素（在这种情况下是播客小部件）对齐到底部（flex-end），而其他卡片对齐到顶部。

我对前端Web开发相当陌生，感觉有点像我只是缺少一些基本的想法来实现这一点。谢谢你的帮助！

这是我目前的代码，我希望能够坚持到底。

＆＃13;

nav

＆＃13;

html,
body {
  font-family: sans-serif;
  font-size: 16px;
}


/* Typography and Helpers */

.text-right {
  text-align: right;
}


/* layout */

section {
  display: block;
  padding: 2rem 0;
}

.container {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.columns {
  display: flex;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: -0.75rem;
  /*   - margins are for nesting */
}

.columns:last-child {
  margin-bottom: -0.75rem;
}

.columns:not(:last-child) {
  margin-bottom: 0.75rem;
}

.column {
  display: block;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}

.align-bottom-container {
  margin-top: auto;
  align-items: flex-end;
}

.align-bottom-item {
  margin-top: auto;
  display: block;
}


/* layout alignment */

.align-items-bottom {
  align-items: flex-end;
  display: flex;
  justify-content: center;
}

.flex {
  display: flex;
}


/* cards */

.flex-card {
  border-left: .5em solid #0093d0;
  background-color: #f7f7f7;
  padding: 1em 1em 0 1em;
}

.two {
  width: 50%;
  flex-basis: 50%;
  min-width: 50%;
}

.card-content {
  padding: 1.5rem;
}

.blog-category {}

.blog-title {}

.blog-meta {}

.blog-description {}

＆＃13;

Answer 1

align-items: flex-end;的flex属性属于您要对齐的flex项的父项，这里的问题是您尝试将此属性应用于您的“页脚”，这是您的孩子假设是你的父母。您的页脚的父级实际上是.column类，其属性为display: block;。

要实现您的目标，只需要在.column类

中添加这两行

display: flex;
flex-direction: column;

然后，您的margin-top: 0;媒体资源才能生效。

另一种方法是使用属于flex items / children父项的属性justify-content: flex-end;。因此，您的页脚将与父项的末尾对齐。然后使用flex卡上的属性margin-bottom: 0;将其“浮动”离页脚。

.column {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.flex-card {
  margin-bottom: auto;
  border-left: .5em solid #0093d0;
  background-color: #f7f7f7;
  padding: 1em 1em 0 1em;

}

html,
body {
  font-family: sans-serif;
  font-size: 16px;
}


/* Typography and Helpers */

.text-right {
  text-align: right;
}


/* layout */

section {
  display: block;
  padding: 2rem 0;
}

.container {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.columns {
  display: flex;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: -0.75rem;
  /*   - margins are for nesting */
}

.columns:last-child {
  margin-bottom: -0.75rem;
}

.columns:not(:last-child) {
  margin-bottom: 0.75rem;
}

.column {
  display: flex;
  flex-direction: column;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}

.align-bottom-container {
  margin-top: auto;
  align-items: flex-end;
}

.align-bottom-item {
  margin-top: auto;
  display: block;
}


/* layout alignment */

.align-items-bottom {
  
  display: flex;
  justify-content: center;
}

.flex {
  display: flex;
}


/* cards */

.flex-card {
  border-left: .5em solid #0093d0;
  background-color: #f7f7f7;
  padding: 1em 1em 0 1em;
}

.two {
  width: 50%;
  flex-basis: 50%;
  min-width: 50%;
}

.card-content {
  padding: 1.5rem;
}

.blog-category {}

.blog-title {}

.blog-meta {}

.blog-description {}

<section class="container">
  <div class="columns">
    <div class="column">
      <div class="flex-card">
        <div class="card-content">
          <p class="blog-category">Expert Strategies</p>
          <div class="columns">
            <p class="column blog-title">Pivot to Purchase</p>
            <p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
          </div>
          <p class="blog-description">If technology can be a disruptor - it will. Zillow has a pilot program that...</p>
          <button>Read More</button>
        </div>
      </div>
      <footer class="align-bottom-container">
        <a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies:  Audit Your Brand" on Spreaker.</a>
        <script async src="https://widget.spreaker.com/widgets.js"></script>
      </footer>
    </div>
    <div class="column">
      <div class="flex-card">
        <div class="card-content">
          <p class="blog-category">Expert Strategies</p>
          <div class="columns">
            <p class="column blog-title">Pivot to Purchase</p>
            <p class="column blog-meta text-right">August 8, 2017 <br>Podcast #18</p>
          </div>
          <p class="blog-description">
            <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus voluptatibus provident inventore velit impedit maxime asperiores consequuntur, ex veritatis libero aspernatur itaque quidem, harum accusamus dolorem, vel similique delectus
              distinctio.
            </div>
          </p>
          <button>Read More</button>
        </div>
      </div>
      <footer><a class="spreaker-player" href="https://www.spreaker.com/user/kellyguest/expert-strategies-audit-your-brand" data-resource="episode_id=11390290" data-theme="light" data-autoplay="false" data-playlist="false" data-width="100%" data-height="200px">Listen to "Expert Strategies:  Audit Your Brand" on Spreaker.</a>
        <script async src="https://widget.spreaker.com/widgets.js"></script>
      </footer>
    </div>
  </div>
</section>

Flexbox对齐底部

1 个答案: