How would I push the button to the bottom of the CSS flexbox in such case?

1

I have created multiple CSS flexboxes on this landing page and I would like to have the SELECT button to be always on the bottom of each box, no matter the size of textual content above. I tried to use multiple properties such as align-self, justify-content, align-items, align-text with various attributes but could not achieve the desired outcome.

Would could I possibly do in this situation to make it work?

Here is the screenshot of flexboxes:

Screenshot1
Screenshot11464×782 95.1 KB

Here is my HTML and CSS for this section:

#pricing-option-1, #pricing-option-2, #pricing-option-3 {
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-color: rgb(230, 230, 230);
  border-radius: 25px;
  padding: 25px;
  margin: 10px;
  width: 30%;
  background-color: yellow;
}

.pricing-amount {
  background-color: blue;
}

<div id="pricing-option-2">
        <h3 class="pricing-option-header">BASIC ENBALI</h3>
        <p class="pricing-amount">$1200/month</p>
        <div class="pricing-body">
          <p class="pricing-option-description">The most popular option. You wouldn't need to worry about finding a place to live, commute to the classes, cooking or find a right place to eat. We got you!</p>
          <ul class="pricing-option-bulletpoints">
            <li>80 hours of any classes</li>
            <li>Accommodation on campus (4 people per room)</li>
            <li>Meal plan (3 times a day)</li>
            <li>Unlimited access to our library</li>
            <li>Unlimited access to our online courses library</li>
          </ul> 
        </div>
        <p class="select-option">
            <button type="submit">SELECT</button>
        </p>
      </div>
2

First off. Thank you. I LOVE your current design and layout, not kidding! This looks like my typical site when I start to see where everything is.

My suggestion is to split these into separate containers and space between them:

image
image1527×829 183 KB

Push your content up and push the button down.

This is a beautiful layout to me. Please post your end result when you get there.

1 Like
3

My first suggestion? Play a game. Specifically, flexbox froggy: https://flexboxfroggy.com/

What you are looking to do, now that you have flex-direction:column, is to change the justify-content property. The reason I mention flexbox froggy is, its a great interactive way to learn some really advanced flexbox patterns.

Of course, a MUCH more advanced and challenging game along the same idea is Flexbox Zombies. Easy to get lost in the storyline (ish), but the flex and stretch and align and all? Great repetition and practice. https://mastery.games/p/flexbox-zombies

4 Likes
4

Thank you very much! It seemed that this outline made the most sense for me to see how each element interacts with each other and where it’s located :slight_smile:

I was able to figure out how it works and here’s the link on my CodePen with the project:

Here is the screenshot of the final look of those containers:

Screenshot2
Screenshot21594×729 122 KB

Best regards,
Konstantin

1 Like
5

Thank you very much!