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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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