Как адаптировать Display:flex?

Question

[art style]

есть секция с 4 divами в ряд по 25% ширины
при увеличении страницы нет адаптивности, т.е. доходя до размеров мобилки или планшета все 4 элемента по прежнему остаются на месте, в ряд. как сделать чтобы при уменьшении экрана на 50%, 2 элемента переносились на следующую строку, а на 75% по 1 элементу на строку?
PS
есть Hover эффект который увеличивает каждый блок до 30% при наведении

Comments

[Ankhena]

родителю flex:wrap
детям менять ширину на разных media
например, на планшете 50%, на мобилках 100%

[art style]

Ankhena, flex:wrap нет. есть hover эффект увеличения который переносит его сразу на другую строку

[Ankhena]

art style, без wrap не будет ничего переносится и вот этого не выйдет

как сделать чтобы при уменьшении экрана на 50%, 2 элемента переносились на следующую строку

Т.е. для переноса элементов на новую строку, флексу нужен wrap.

[Ankhena]

art style, https://jsfiddle.net/z648hf9L/

Answer 1

[Natalia ivanova]

#timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

и min-width: , например, 200px; дочерним элементам задайте. При наведении - чуть больше значение min-width:

Comments

[art style]

нет. тогда при hover эл-т сразу переносится на другую строку

[Natalia ivanova]

Тогда можно попробовать с медиа-запросами и более сложной разметкой, пары блоков обернуть в обертку. Для каждой и в каждой прописать flex. При уменьшении ширины задать flex-direction: column.

Answer 2

[Ankhena]

Так вы хотите?
https://jsfiddle.net/z648hf9L/

spoiler

<div class="block">

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>

* {
  box-sizing: border-box
}

html,
body {
background: #eee;
}


.block {
  display: flex;
  width: 80%;
  margin: auto;
  background: #fff;
}
.item {
  width: 25%;
  height: 200px;
  border: 1px solid deepskyblue;
}
.item:hover {
  flex-basis: 30%;
}

@media (max-width: 600px) {
  .block {
    flex-wrap: wrap;
  }
  .item {
    flex-grow: 1;
    width: 40%;
  }
  .item:hover {
    width: 60%;
  }
}
@media (max-width: 400px) {
  .item {
    width: 100%;
  }
  .item:hover {
    width: initial;
  }
}