Перенос элементов при сжатии окна браузера

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

Свойство flex-wrap есть у флекс-контейнера всегда, только по умолчанию ему задано значение nowrap , запрещающее перенос.

Это поведение можно изменить так, чтобы при сжатии элементы переносились на новую строку или колонку.

Для того чтобы свойство флекс бокса flex-wrap работал необходимо чтобы у этого блока было свойство display: flex;

Как настроить перенос элементов при сжатии окна браузера

nowrap , запрещающее перенос.

wrap (англ. wrap, «завернуться»). У флекс-контейнера с таким свойством последние элементы заворачиваются (переходят) на новую строчку, если не умещаются на текущей.

Значение wrap-reverse («перенос наоборот») позволяет так, чтобы переносились не последние, а первые элементы строки/колонки.

1

2

3

flex-wrap:



  - flex контейнер 
 

  - flex элемент 


  - Содержимое flex элемента (контент) 
 

 родительский контейер  
.parent {
    flex-wrap:nowrap;
    border: rgba(211, 221, 66, 0.63) 20px solid;
    margin: 0px 0px 20px 0px;
}


 дочерний контейнер  
.item {
    border: rgba(97, 47, 177, 0.63) 20px solid;
}


 контент дочернего блока  
.item__content {
    background-color: rgba(12, 134, 88, 0.63);
    padding: 50px;
    font-size: 30px;
    color: rgb(255, 255, 255);
}