Как выровнять нижний колонтитул по низу флексбокса "карточки"?

Question

У меня есть серия «карточек», которые я установил через flexbox.У меня есть нижний колонтитул, который я хочу добавить к каждому, который «прикрепляет» себя к нижней части каждого блока (не уверен, что я использую правильную терминологию там).

Тем не менее, я хочу, чтобы он прикреплялся к нижней части независимо от длины содержимого карты.Другими словами, я бы хотел, чтобы нижний колонтитул был привязан к нижней части на основе карты с самым длинным содержимым в ряду.

Эта скрипка, надеюсь, объясняет, что я имею в виду.Карта с минимальным содержанием должна иметь нижний колонтитул в том же месте, что и карта с большим содержанием: https://codepen.io/anon/pen/xMWYjR

Вот код:

.card-wrapper {
    display: flex;
    justify-content: space-around;
}

.card {
    display: flex;
    flex-direction: column;
    flex: 0 0 30%;
    border: 1px solid #323232;
}

.card-footer {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid #000;
    margin-top: auto;
    align-self: flex-end;
}

---

<div class="card-wrapper">
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
</div>

Answer 1

Вы можете попробовать этот код:

Описание: я обновляю простой код, в котором сообщается, что класс .card-content отображает flex, flex-столбец, а также высоту 100% в данный моментродитель.Я также удаляю небольшую форму кода .card-footer align-self: flex-end; свойство.

На самом деле ваш код в порядке, но ваш родитель (.card-content) не такой же высотыродитель.Я просто решаю это.

.card-wrapper {
  display: flex;
  justify-content: space-around;
}
.card {
  display: flex;
  flex-direction: column;
  flex: 0 0 30%;
  border: 1px solid #323232;
}
    
.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-footer {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #000;
  margin-top: auto;
}

<div class="card-wrapper">
    <a href="#" class="card">
        <div class="card-content d-flex flex-column">
            <h2>Title</h2>
            <p>Content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content content</p>
          <p>Content content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content content</p>
            <div class="card-footer mt-auto">
                <p>Footer xx</p>
            </div>
        </div>
    </a>
</div>

Спасибо

Answer 2

    .card-wrapper {
        display: flex;
        justify-content: space-around;
    }

    .card {
        display: flex;
        flex-direction: column;
        flex: 0 0 30%;
        border: 1px solid #323232;
    }

  .card * {
    width:100%;
    box-sizing:border-box;
    text-align:center;
  }

    .card-footer {
        display: flex;
        flex-direction: column;
        padding: 16px;
        border: 1px solid #000;
        margin-top: auto;
        align-self: flex-end;
    }

<div class="card-wrapper">
<!-- first card start -->
    <a href="#" class="card">
      
            <h2>Title</h2>
            <p>Content</p>
            <div class="card-footer">
               <p> Footer</p>
            </div>
    </a>
    <!-- first card end -->
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
</div>