无法让我的按钮使用 flexbox 正确对齐

Question

我正在使用 flexbox 格式化三个 div，使它们具有相同的高度（无论内容如何）。我正在尝试对齐 div 底部的那些 div 内的按钮（全部垂直对齐），但我无法让它工作。我试图以任何我能想到的方式使用 align-content 和 justify-content ...... 这是“干净”的代码，我删除了我试图对齐按钮的所有内容，只保留了工作代码。

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

如何设置我的 css 以使三个按钮在所有 div 的底部对齐？我需要添加任何类型的容器吗？谢谢。

Answer 1

你需要嵌套弹性盒

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

Answer 2

将您的按钮包装成一个带有类的 div 并编写如下所示的 css。

.container .row {
display: flex;
@media screen and (max-width: $screen-sm) {
    flex-direction: column;
    }
}

.btn-cont {
  width: 100%;
  display: flex;
  justify-content: center;
}

<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>
         <div class="btn-cont"><p><a href="{{ .url }}" class="btn">{{ .button}}</a></p> </div>
    </div>
  </div>
</div>
</div>

Answer 3

在按钮上设置box-sizing: border-box。如果是content-box，那就是造成不一致的原因。