Как поставить блоки горизонтально друг под другом

Question

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

Answer 1

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

Answer 2

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

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

БЛОГ НА HUSL

Как поставить блоки горизонтально друг под другом

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