Как сделать сначала сужение, потом перенос элементов Flex

Question

HTML:

<div class="selector">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>  
</div>

CSS:

.selector {
        display: flex;
        gap: 20px;
        flex-wrap: wrap; 
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
}
.el {
    width: 300px;
    height: 200px;
    min-width: 210px;
}

Как сделать чтобы при уменьшении размеров экрана сначала сужались блоки до минимальной ширины, а только потом они переносились на новую строку? Всё через flex. Если не получится, можно через grid

Answer 1

.selector {
        display: flex;
        gap: 20px;
        flex-wrap: wrap; 
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
}

.selector>*{
    flex: 1 1 50px;
}
.el {
    width: 300px;
    height: 200px;
    min-width: 210px;
    background-color: black;
}

span{
    visibility: hidden;
}

<div class="selector">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>  
  <span class="el"></span> 
</div>

.el уменьшается до минимальной ширины, только затем переносится на новую строку

.selector {
        display: flex;
        gap: 20px;
        flex-wrap: wrap; 
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
}

.selector>*{
    flex: 1 1 50px;
}
.el {
    width: 300px;
    height: 200px;
    min-width: 210px;
    background-color: black;
}

<div class="selector">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>  
</div>

Answer 2

Вроде так вы хотели, уменьшайте у .selector параметр width, что бы увидеть результат. Ставите min-width - это параметр при котором больше не будут сужаться блоки и ставите width, что бы в две строки было.

.selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.el {
  min-width: 200px;
  width: calc(50% - 5px);
  height: 100px;
  background-color: green;
}

<div class="selector">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>  
</div>

БЛОГ НА HUSL

Как сделать сначала сужение, потом перенос элементов Flex

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