Can't get my buttons to align correctly using flexbox

问题

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>

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.

回答1:

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>

回答2:

Wrap your button into a div with a class and write the css like below.

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

来源：https://stackoverflow.com/questions/47784963/cant-get-my-buttons-to-align-correctly-using-flexbox