How to align bottom content (button) in variable height columns?

Question

.row {
  display: flex;
}

section {
  display: flex;
  flex: 1 1 0;
  background: #eee;
}

h1, h2, p {
  text-align: center;
}

button {
  margin: 10px auto;
  display: block;
}

<div class="row">
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some content. This is some content. This is some content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is more content. This is more content.</p>
      <button>Button</button>
    </div>
  </section>
</div>

The above snippet uses flexbox for equal height columns. How can each column's button get aligned to the bottom? Is this possible with flexbox, or do we have to use position: relative & position: absolute?

This should work with align-self:flex-end; on the button but I can't get it to work... — fnune
– fnune, Commented Jul 19, 2016 at 13:31
I was trying this myself and couldn't get it to work either. If I find a way, I'll post an answer. If someone else finds a way, I'll mark it as correct since it is quite semantic and doesn't depend on previous HTML structure. — Raphael Rafatpanah
– Raphael Rafatpanah, Commented Jul 19, 2016 at 13:34

G-Cyrillus · Accepted Answer · 2016-07-19 13:27:05Z

You may inbricate flexbox and use flex on <p> to have them use whole space: example

.row {
  display: flex;
}
section {
  display: flex;
  flex: 1 1 0;
  background: #eee;
}
h1,
h2,
p {
  text-align: center;
}
section div {
  display: flex;
  flex-flow: column;
}
section div p {
  flex: 1
}
button {
  margin: 10px auto;
  display: block;
}

<div class="row">
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some content. This is some content. This is some content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is more content. This is more content.</p>
      <button>Button</button>
    </div>
  </section>
</div>

or (flex again) reset margin to button instead flex value on <p>

.row {
  display: flex;
}
section {
  display: flex;
  flex: 1 1 0;
  background: #eee;
}
h1,
h2,
p {
  text-align: center;
}
section div {
  display: flex;
  flex-flow: column;
}
button {
  margin: auto auto 10px;
  display: block;
}

<div class="row">
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some content. This is some content. This is some content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is more content. This is more content.</p>
      <button>Button</button>
    </div>
  </section>
</div>

This is great. Is there a way to make the button itself aligned to the bottom? This does work well, but it would be more semantic / flexible to have styles added to the button itself instead of relying on a common HTML structure of all a row's columns.

Mukesh Ram · Accepted Answer · 2016-07-19 13:22:56Z

You can achieve this using position: absolute

.row {
  display: flex;
}

section {
  display: flex;
  flex: 1 1 0;
  background: #eee;
  position:relative;
  padding-bottom:20px;
}

h1, h2, p {
  text-align: center;
}

button {
   bottom: 0;
   display: block;
   left: 50%;
   margin: 10px auto;
   position: absolute;
  transform: translateX(-50%);
}

<div class="row">
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some content. This is some content. This is some content.</p>
      <button>Button</button> 
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content. This is some longer content.</p>
      <button>Button</button>
    </div>
  </section>
  <section>
    <div>
      <h1>Title</h1>
      <h2>Subheading</h2>
      <p>This is more content. This is more content.</p>
      <button>Button</button>
    </div>
  </section>
</div>

Collectives™ on Stack Overflow

How to align bottom content (button) in variable height columns?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related