0

.test_wrapper {
  display: flex;
  justify-content: space-around;
  min-height: 800px;
  background-color: rgba(255, 0, 0, 0.349);
}

.test_item {
  margin: 20px;
  width: 150px;
  height: 150px;
  background-color: blue;
}

.test_descr {
  width: 150px;
  margin: 20px;
  text-align: center;
}
<div class="test_wrapper">

  <div class="test_item"></div>
  <div class="test_descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur</div>
  <div class="test_item"></div>
  <div class="test_descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur</div>
  <div class="test_item"></div>
  <div class="test_descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur</div>

</div>

2 ответа 2

0

.test_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 800px;
  background-color: rgba(255, 0, 0, 0.349);
}

.test_item {
  margin: 20px;
  width: 150px;
  height: 150px;
  background-color: blue;
}

.test_descr {
  width: 150px;
  margin: 20px;
  text-align: center;
}
<div class="test_wrapper">

  <div class="test_item"></div>
  <div class="test_descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur</div>
  <div class="test_item"></div>
  <div class="test_descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur</div>
  <div class="test_item"></div>
  <div class="test_descr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum animi, consequuntur</div>

</div>

0

Достаточно добавить свойство flex-direction: column; к родителю. В вашем случае нужный вам родитель это .test_wrapper

Вот хорошая песочница для экспериментирований с расположением элементов flex-песочнице: https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.