0

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

1
  • Прочитайте про свойство flex-shrink 28 авг 2021 в 15:25

1 ответ 1

0

.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>

6
  • Последний блок растягивается на всю ширину. При помощи флексов можно как-то убрать и сделать обычного размера?
    – Polo
    28 авг 2021 в 16:00
  • Ничто не мешает последнему блоку занять всю ширину, для этого метода нужно добавить еще один блок 28 авг 2021 в 16:25
  • Ну а как-то можно сделать чтобы было сжатие до определённого размера, а потом перенос без растягивания последнего элемента?
    – Polo
    28 авг 2021 в 16:31
  • Попробуй, должно сработать <span class="el"></span> span{ visibility: hidden; } 28 авг 2021 в 16:37
  • visibility: hidden просто скрывает ведь элемент
    – Polo
    28 авг 2021 в 16:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.