Не работает justify-content: space-between

Question

есть блок отзыва с фиксированными размерами, нужно чтобы между кнопкой-ссылкой "Подробнее" и текстом было свободное пространство. Я задал элементам флекс-раскладку, направление оси column и выравнивание space-between, но по итогу оно не срабатывает, хотя место для выравнивания есть. Использовал и обёртку дивами, и задавал минимальную высоту блоку с текстом, что не особо правильно - всё равно не работает. Подскажите что можно изменить.

[![введите сюда описание изображения][1]][1]

.review_text-block {
  margin-left: 65px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 35px;
}

.review_text {
  display: block;
  margin: 0;
  padding: 0;
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 24px;
  color: #E5E6EC;
}

.more {
  display: block;
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 2px;
  padding: 12px 20px;
  margin-bottom: 45px;
}

  <div class="review_text-block">
    <blockquote class="review_text">
    </blockquote>
    <a class="more" href="">Подробнее</a>
  </div>

*

Answer 1

Чтобы в данном примере работал justify-content: space-between, нужно свободное пространство между элементами. А у Вашего .review_text-block нет высоты, соответственно элементы прижаты друг к другу. Если есть такая необходимость, задайте блоку-обёртке высоту, бОльшую, чем сумма высот цитаты и кнопки, - тогда всё заработает.

Но для того, чтобы между кнопкой и цитатой было пространство, достаточно кнопке задать margin-top:

body {
  background-color: gray;
}
.review_text-block {
  margin-left: 65px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 35px;
}

.review_text {
  display: block;
  margin: 0;
  padding: 0;
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 24px;
  color: #E5E6EC;
}

.more {
  display: block;
  font-family: 'NotoSans';
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 2px;
  padding: 12px 20px;
  margin-bottom: 45px;
  margin-top: 30px;
}

  <div class="review_text-block">
    <blockquote class="review_text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus illo quas atque dolor, dolore voluptatum iste soluta at maiores ipsa a obcaecati pariatur numquam enim. Consequatur quae, commodi iure nisi!
    </blockquote>
    <a class="more" href="">Подробнее</a>
  </div>

БЛОГ НА HUSL

Не работает justify-content: space-between

Ответы (1 шт):