1

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.

VXp
  • 11,598
  • 6
  • 31
  • 46
CharleyB0y
  • 109
  • 2
  • 14

3 Answers3

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

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>
Raydoan Anik
  • 219
  • 2
  • 15
  • I have wrapped my buttons like in your example and added the corresponding css, but the result is still the same. Buttons are displayed right after "description,” at different heights depending on the description's length... – CharleyB0y Dec 13 '17 at 04:02
  • use justify-content :left instead of center. – Raydoan Anik Dec 13 '17 at 05:03
  • I have tried it and it doesn't work, but "justify-content: left" doesn't seem to exist anyways? – CharleyB0y Dec 13 '17 at 05:26
0

Set box-sizing: border-box on the button. If it's a content-box, that's what is responsible for the inconsistency.

Tofi A.
  • 83
  • 1
  • 7