CODEWITHSUNDEEP
htmlcssflexboxvertical-alignment
justin
justin

Reputation: 563

Aligning flex items vertically

I am making cards using flexbox(https://jsfiddle.net/vs37qo0r/): 

/* Only included flex related styles*/

.container {
  display: flex;
  flex-direction: row;
  /*default*/
  align-items: stretch;
  /*default*/
  justify-content: space-around;
}

.card {
  flex-basis: 20%;
}
<div class="container">
  <div class="card">
    <h3>Feature 1</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
    </p>
    <button type="button">Go Somewhere</button>
  </div>
  <!-- two more cards of same format-->
</div>

Each <h3> and <p> line up with each other. But, not every <p> is the same size, which then throws off where the <button> is layed out. How can I tell all of the <button>s to line up with each other regardless of the size of the <p> above it?

Upvotes: 1

Views: 89

Answers (5)

Joppe Meijers
Joppe Meijers

Reputation: 81

You need to add display: flex, flex-dicrection: column and justify-content: space-between.

Your new css .card class looks like:

.card{
    flex-basis: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

I hope this will work for you!

Upvotes: 1

Mobarak Ali
Mobarak Ali

Reputation: 760

I'm working with you jsfiddle version:

there I added these extra code, and you never have to touch your HTML for it!

.card{
 ...
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  margin-top: auto !important;
}

and it's working fine!

body {
  background-color: white;
  margin-top: 100px;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  /* default */
  align-items: stretch;
  /* default */
  justify-content: space-around;
}

.card {
  border: 1px solid grey;
  border-radius: 3px;
  background-color: white;
  flex-basis: 20%;
  text-align: center;
  padding: 30px;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  margin-top: auto;
}
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="card">
      <h3>Feature 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
      </p>
      <button type="button">Go Somewhere</button>
    </div>
    <div class="card">
      <h3>Feature 2</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
      </p>
      <button type="button">Go Somewhere</button>
    </div>
    <div class="card">
      <h3>Feature 3</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
      </p>
      <button type="button">Go Somewhere</button>
    </div>

  </div>
</body>

Upvotes: 1

Dan
Dan

Reputation: 63059

jsFiddle

There is no need for a wrapper or more than 3 additional properties. Set .card to flex:

.card {
  display:flex;
  flex-direction: column;
  ....
}

Set .card p to flex: 1

.card p {
  flex: 1;
}

Upvotes: 2

seantunwin
seantunwin

Reputation: 1768

  • Set .card to display: flex
  • Enclose h3, p in a wrapper with flex: 1
  • Set the button to be at flex-end

jfFiddle

 body{
    background-color: white;
    margin-top: 100px;
    padding: 0;
  }
  .container{
    display:flex;
    flex-direction: row; /*default*/
    align-items: stretch; /*default*/
    justify-content: space-around;
  }
  .card{
    border: 1px solid grey;
    border-radius: 3px;
    background-color: white;
    flex-basis: 20%;
    text-align: center;
    padding: 30px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
  }
  
  .card__content {
    flex: 1;
  }
  
  .button {
    align-self: flex-end;
  }
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
<div class="container">
<div class="card">
 <div class="card__content">
 
  <h3>Feature 1</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
  </p>
  
 </div>
  <button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
  <h3>Feature 2</h3>
  <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
  </p>
  </div>
  <button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
  <h3>Feature 3</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
  </p>
  </div>
  <button type="button">Go Somewhere</button>
</div>

</div>
</body>

Upvotes: 3

Ito Pizarro
Ito Pizarro

Reputation: 1607

Try making the .card elements flex-parents themselves, then play with the justify-content property.

.card{
    …
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


body {
  background-color: white;
  margin-top: 100px;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  /*default*/
  align-items: stretch;
  /*default*/
  justify-content: space-around;
}

.card {
  border: 1px solid grey;
  border-radius: 3px;
  background-color: white;
  flex-basis: 20%;
  text-align: center;
  padding: 30px;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="card">
      <h3>Feature 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
      </p>
      <button type="button">Go Somewhere</button>
    </div>
    <div class="card">
      <h3>Feature 2</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
      </p>
      <button type="button">Go Somewhere</button>
    </div>
    <div class="card">
      <h3>Feature 3</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
      </p>
      <button type="button">Go Somewhere</button>
    </div>

  </div>
</body>

Upvotes: 1

Related Questions