CODEWITHSUNDEEP
htmlcssflexbox
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

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

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

Upvotes: 1

Views: 72

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105873

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>

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6328

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>

Upvotes: 1

Related Questions