Как можно адаптировать эту часть макета, кроме способа с flex-direction?

Question



@media(max-width:){
body{
  display:flex;
  flex-direction:column;
}
}



[![Часть макета для адаптива][1]][1]


  [1]: https://i.stack.imgur.com/AllQJ.png

Answer 1

Видимо, имеется в виду, часть с карточками (три в ряд на макете)? Например, можно сделать через гриды. Тогда карточки тянутся, сами определяют, сколько в ряд, и сами схлопываются в колонку при достижении минимального размера. Попробуйте изменять ширину контейнера:

.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  
  max-width: 600px;
  gap: 20px;
  background-color: #ddd;
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.card {
 background-color: #aaa;
 min-height: 100px;
}

<ul class="cards">
  <li class="card">1</li>
  <li class="card">2</li>
  <li class="card">3</li>
</ul>

БЛОГ НА HUSL

Как можно адаптировать эту часть макета, кроме способа с flex-direction?

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