Flexbox выравнивает содержимое пространства между столбцами flex - PullRequest
Новая
       25

Flexbox выравнивает содержимое пространства между столбцами flex

0 голосов
/ 21 июня 2019

Я хочу взять кнопку «читать дальше» и нажать ее внизу этой карточки.Есть ли эквивалент align-content:space-between для flex-col?Верхний раздел, средний абзац и кнопка «Показать больше» находятся в отдельном элементе div, заключенном в раздел родительской карты.

enter image description here

1 Ответ

0 голосов
/ 22 июня 2019

Вы можете достичь этого с помощью комбинации justify-content: space-between и text-align: right с кнопкой readmore.

В результате: 

.card {
  background: #ddd;
  margin: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child-2 {
  text-align: right;
}

.child {
  background: #eee;
  padding: 1rem;
}
<div class="card">
  <div class="child">
    <h1>Article Awesome</h1>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione inventore, dolor dolorem vero, tenetur rerum tempora autem repudiandae deleniti rem sunt perferendis quasi dolore voluptatum fugit quisquam asperiores exercitationem. Exercitationem?
    </p>
  </div>
  <div class="child child-2">Read More ...</div>
</div>

Обратите внимание, что вы можете установить любую высоту для карты, и она будет соответственно масштабироваться с помощью кнопки чтения внизу.

...