Адаптивные flex блоки (grow, shrink, baseWidth)

26.10.2020

Довольно частая задача, особенно для лендинг сайтов,разметить несколько блоков, каждый их которых занимает определенную ширину, а при уменьшении размера экрана, они должны переноситься на следующую строку.

Также Вам может пригодиться заметка Css flexbox justify-content: space-between; не работает

Для этого отлично походить flexbox, в частности свойство flex: grow shrink, baseWidth.

 
flex: 0 1 150px;

Если значение grow, выставить в 0, то блоки, на новой строке, будут занимать указанную в baseWidth ширину.

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

Посмотреть демо

 
.items {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    border: 1px solid #00ff00;
}

.item {
    flex: 0 1 150px;

    height: 100px;
    background-color: #1d78cb;
    border: 1px solid #000;

    margin: 5px;
    text-align: center;
    font-size: 80px;
}

.items2 .item {
    flex: 1 1 150px;

    background-color: #cb2c85;
}

 
<div class="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>

<div class="items items2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>

Категории: CSS

Адаптивные flex блоки (grow, shrink, baseWidth)

Связанные материалы: