无法使用Flexbox使我的按钮正确对齐 [英] Can't get my buttons to align correctly using flexbox
问题描述
我正在使用flexbox格式化三个div,以便它们具有相同的高度(无论内容如何).我试图将div底部的div中的按钮对齐(全部垂直对齐),但无法正常工作.我试图以我能想到的任何方式使用align-content和justify-content ... 这是干净"的代码,在这里我删除了所有尝试对齐按钮的内容,只保留了工作代码.
I am using flexbox to format three divs so that they have the same height (no matter the content). I am trying to align the buttons inside those divs at the bottom of the divs (all vertically aligned), but I can't get it to work. I have tried to use align-content and justify-content in any way I could think of... Here is the "clean" code where I removed everything I tried to align the buttons and kept only the working code.
.container .row {
@include flex;
@media screen and (max-width: $screen-sm) {
flex-direction: column;
}
}
<div class="container">
<div class="row row-bottom-padded">
<div class="block">
<div class="text">
<i class="icon {{ .icon }}"></i>
<h2>{{ .title }}</h2>
<p>{{ .description }}</p>
<p><a href="{{ .url }}" class="btn">{{ .button}}</a></p>
</div>
</div>
<div class="block">
<div class="text">
<i class="icon {{ .icon }}"></i>
<h2>{{ .title }}</h2>
<p>{{ .description }}</p>
<p><a href="{{ .url }}" class="btn">{{ .button}}</a></p>
</div>
</div>
<div class="block">
<div class="text">
<i class="icon {{ .icon }}"></i>
<h2>{{ .title }}</h2>
<p>{{ .description }}</p>
<p><a href="{{ .url }}" class="btn">{{ .button}}</a></p>
</div>
</div>
</div>
</div>
如何为所有div底部的三个按钮设置css?我需要添加任何种类的容器吗?谢谢.
How can I setup my css for the three buttons to be aligned at the bottom across all divs? Do I need to add containers of any sort? Thanks.
推荐答案
您需要嵌套Flexbox
You need to nest flexboxes
.container .row {
display: flex;
}
.block {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid grey;
}
.text {
flex: 1;
/* expand to maximum height of parent */
display: flex;
flex-direction: column;
}
.text p:last-child {
margin-top: auto;
/* push to bottom */
text-align: center;
}
.btn {
padding: 1em;
background: lightblue;
}
<div class="container">
<div class="row row-bottom-padded">
<div class="block">
<div class="text">
<i class="icon">icon</i>
<h2>Title</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><a href="#" class="btn">Button</a></p>
</div>
</div>
<div class="block">
<div class="text">
<i class="icon">icon</i>
<h2>Title</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p><a href="#" class="btn">Button</a></p>
</div>
</div>
<div class="block">
<div class="text">
<i class="icon">icon</i>
<h2>Title</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
<p><a href="#" class="btn">Button</a></p>
</div>
</div>
</div>
</div>
这篇关于无法使用Flexbox使我的按钮正确对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!