1
我有一系列使用flexbox的卡片，並且我希望底部元素（在這種情況下是播客小部件）對齊底部（柔性端），而其他部分對齊頂部。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>
@Michael_B在這個具體的問題和價值我的回答帶有我的Flex-盒，以及如何父母沒有正確定義的父/子性質的解釋。 –
@KanstantsinArlouski，該值保持不變。你的答案仍然存在。但這個問題是我見過的至少10個其他帖子的重複。 –
@Michael_B我的歉意。我提起它，因爲我認爲重複的問題被刪除。 –