无法使用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屋！