Flex-basis флексбокс адаптация

247

22 мая 2018, 02:20

Как адаптивно с помощью FlexBox без использования медиазапросов сверстать такие блоки? Чтобы при ресайзе они адаптивно изменяли ширину, и минимальная ширина была 20%, пытался через flex-basis но кажется я не до конца понимаю суть флексов, примеры смотрел. Спасибо за помощь!

Answer 1

Нужно задать flex-контейнеру flex-wrap: wrap, а flex-элементам минимальную ширину и фикс.ширину, чтобы переносилось всё:

.flex-cont { 
  display: flex; 
  flex-wrap: wrap; 
} 
 
.flex-item { 
  flex: 0 0 auto; 
  min-width: 20%; 
  width: 150px; 
  height: 250px; 
  border: 1px solid red; 
}

<div class="flex-cont"> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
  <div class="flex-item"></div> 
</div>