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

Question

art style @arttstyle

web-макака

CSS

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

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

Вопрос задан более трёх лет назад
352 просмотра

4 комментария

Подписаться 1 Простой 4 комментария

Ankhena @Ankhena Куратор тега CSS

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

Написано более трёх лет назад
art style @arttstyle Автор вопроса

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

art style, без wrap не будет ничего переносится и вот этого не выйдет
как сделать чтобы при уменьшении экрана на 50%, 2 элемента переносились на следующую строку

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более трёх лет назад

родителю flex:wrap
детям менять ширину на разных media
например, на планшете 50%, на мобилках 100%
Ankhena, flex:wrap нет. есть hover эффект увеличения который переносит его сразу на другую строку
art style, без wrap не будет ничего переносится и вот этого не выйдет
как сделать чтобы при уменьшении экрана на 50%, 2 элемента переносились на следующую строку

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

Answer 1 · 2019-12-18 12:29:45

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

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

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

Войдите на сайт