Как бы я в таком случае положил sh кнопку внизу флексбокса CSS?

Question

Я создал несколько флексбоксов CSS на этой целевой странице, и мне бы хотелось, чтобы кнопка SELECT всегда была в нижней части каждого блока, независимо от размера текстового содержимого выше. Я пытался использовать несколько свойств, таких как align-self, justify-content, align-items, align-text с различными атрибутами, но не смог достичь желаемого результата.

Могу ли я сделать в этой ситуации, чтобы сделать это работает?

Вот скриншот flexboxes:

Вот мои HTML и CSS для этого раздела:

#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>

Answer 1

Во-первых, вам нужна определенная высота для контейнера, чтобы избежать подстройки высоты к содержимому (я добавил это в приведенном ниже фрагменте кода и стер некоторые части содержимого, чтобы сделать его более очевидным).

Затем вы можете применить margin-top: auto; к последнему элементу (контейнеру для кнопки), чтобы автоматически переместить его на дно (конец порядка сгибания)

#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;
}

#pricing-option-2 {
  height: 500px;
}
.v {
   margin-top: auto;
}

<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. 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>Unlimited access to our online courses library</li>
    </ul>
  </div>
  <p class=" v">
    <button type="submit">SELECT</button>
  </p>
</div>

Answer 2

1. Сначала сделайте блок .pricing-body как flexbox.
2. Затем установите flex-grow: 1 на .select -option , что позволит заполнить все свободное пространство
3. Наконец выровнять содержимое .select-option с align-items: flex-end чтобы кнопка оставалась внизу

Просто добавьте этот фрагмент кода в CSS:

.pricing-body {
  display: flex;
  flex-direction: column;
}

.select-option {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}

См. этот пример кода