Flexbox对齐底部

Question

我有一系列使用flexbox的卡片，并且我希望底部元素（在这种情况下是播客小部件）对齐底部（柔性端），而其他部分对齐顶部。

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

这里是我目前的codepen，我想要坚持到底部。

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 {}

<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>

Answer 1

的align-items: flex-end; flex属性属于您要对齐柔性物品的父母，这里的问题是，你正在试图将此属性应用到你的“页脚”，这是你认为是你的灵活父母的孩子。您的页脚的父母实际上是.column类，它具有display: block;的属性。

为了实现你的愿望将只需要添加这两条线到你.column类

display: flex; 
flex-direction: column; 

那么这将使你的margin-top: 0;属性生效什么。

另一种方法是使用属于flex项目/子项的父项的属性justify-content: flex-end;。所以你的页脚会对齐到你父母的最后。然后使用弹性卡上的属性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>