Spacing the flex groups with equal height and button at the bottom

I’m attempting to have three cards with the same height, vertically padded somewhat (so they don’t look crushed on top of each other). The image at the top and the button at the bottom of each card, can’t seem to get that to stick at the bottom though…

I wasn’t sure if services-main-content needed to be ‘display: flex’ on services-main-content or not (to be spaced evenly).

HTML:

<section id="services">
  <div id="services-main-content">
    <h3 class="services-title">Services</h3>
    <p>Take a look into some of the services we offer!</p>
  </div>
  <div id="services-group-container">
    <div class="services-group">
      <div class="services-image">
        <img src="http://www.stevensegallery.com/600/400" />
      </div>
      <div class="services-content">
        <h3 class="services-title">Card One</h3>
        <p>Take a look at this stuff. Blah blah.</p>
        <a class="button">More &gt;&gt;</a>
      </div>
    </div>

    <div class="services-group">
      <div class="services-image">
        <img src="http://www.stevensegallery.com/600/400" />
      </div>
      <div class="services-content">
        <h3 class="services-title">Card Two</h3>
        <p>Great stuff in here, step right up and some other text!</p>
        <a class="button">More &gt;&gt;</a>
      </div>
    </div>

    <div class="services-group">
      <div class="services-image">
        <img src="http://www.stevensegallery.com/600/400" />
      </div>
      <div class="services-content">
        <h3 class="services-title">Card Three</h3>
        <p>What is this then? Something else? Yepity yup yepity yup yup yup.</p>
        <a class="button">More &gt;&gt;</a>
      </div>
    </div>
  </div>
</section>

CSS:

#services {
  background-color: #efefef;
}

#services-main-content {
  padding: 2% 0%;
  text-align: center;
}

#services-group-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-around;
  padding: 0% 0% 2% 0%;
}

.services-group {
  text-align: center;
  padding: 0.5em;
  background-color: #efefef;
  flex: 1 0 30%;
  border-left: 1px solid #AFAFAF;
}

.services-group:last-child {
  border-right: none;
}

#services>#services-group-container>.services-group>.services-image>img {
  display: block;
  width: 100%;
}

#services>#services-group-container>.services-group>.services-content>.button {
  color: #124a58;
  margin-top: auto;
}

#services>#services-group-container>.services-group>.services-content>.button:hover {
  color: #000;
}

.services-content {}```

Try something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#services {
	background-color: #efefef;
}
#services-main-content {
	padding: 2% 0%;
	text-align: center;
}
#services-group-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-around;
	padding: 0% 0% 2% 0%;
}
.services-group {
	display:flex;
	flex-direction:column;
	text-align: center;
	padding: 0.5em;
	background-color: #efefef;
	flex: 1 0 30%;
	border-left: 1px solid #AFAFAF;
}
.services-group:last-child {
	border-right: none;
}
.services-image>img {
	display: block;
	width: 100%;
}
.button {
	color: #124a58;
	margin-top: auto;
}
.services-content>.button:hover {
	color: #000;
}
.services-content {
}
.button {
	margin-top:auto;
}
</style>
</head>

<body>
<section id="services">
  <div id="services-main-content">
    <h3 class="services-title">Services</h3>
    <p>Take a look into some of the services we offer!</p>
  </div>
  <div id="services-group-container">
    <div class="services-group">
      <div class="services-image"> <img src="http://www.stevensegallery.com/600/400" /> </div>
      <div class="services-content">
        <h3 class="services-title">Card One</h3>
        <p>Take a look at this stuff. Blah blah.</p>
      </div>
      <a class="button">More &gt;&gt;</a> </div>
    <div class="services-group">
      <div class="services-image"> <img src="http://www.stevensegallery.com/600/400" /> </div>
      <div class="services-content">
        <h3 class="services-title">Card Two</h3>
        <p>Great stuff in here, step right up and some other text!</p>
      </div>
      <a class="button">More &gt;&gt;</a> </div>
    <div class="services-group">
      <div class="services-image"> <img src="http://www.stevensegallery.com/600/400" /> </div>
      <div class="services-content">
        <h3 class="services-title">Card Three</h3>
        <p>What is this then? Something else? Yepity yup yepity yup yup yup.</p>
      </div>
      <a class="button">More &gt;&gt;</a> </div>
  </div>
</section>
</body>
</html>

Three things changed.

I set display:flex here and set flex-direction to column.

.services-group {
	display:flex;
	flex-direction:column;
}

I moved the button out of the div so that we can align it to the bottom with margin-top:auto.

 <div class="services-group">
      <div class="services-image"> <img src="http://www.stevensegallery.com/600/400" /> </div>
      <div class="services-content">
        <h3 class="services-title">Card One</h3>
        <p>Take a look at this stuff. Blah blah.</p>
      </div>
      <a class="button">More &gt;&gt;</a> 
    </div>

Then just margin-top:auto will move a flex to the bottom as auto soaks up all the available space.

.button {
	margin-top:auto;
}

As an aside never do this please :slight_smile:

#services>#services-group-container>.services-group>.services-image>img {}

IDs are unique so by have a 2 IDS in your selector doesn’t make it more unique. keep your selectors as short as possible for easy maintenance. If you find you are running to 3 or more selectors in your rule then it is likely you are taking the wrong approach and setting yourself up for a maintenance nightmare down the line.

Keep it simple and add a simple class and avoid ids in your selectors most of the time.

e.g. You could refine that last rule to this (or similar):

.services-group--image{}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.