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

你需要嵌套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>

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>

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

2 个答案: