Flexbox对齐底部
问题描述:
我有一系列使用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>
答
的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>
+1
真诚感谢快速而正确的回应!这不仅工作,而且使用这种方法允许我删除多个对齐类,这些对齐类用于欺骗行为像列一样的flexbox行。 –
@Michael_B在这个具体的问题和价值我的回答带有我的Flex-盒,以及如何父母没有正确定义的父/子性质的解释。 –
@KanstantsinArlouski,该值保持不变。你的答案仍然存在。但这个问题是我见过的至少10个其他帖子的重复。 –
@Michael_B我的歉意。我提起它,因为我认为重复的问题被删除。 –