Заметки по flex

12.11.2020
flex: 0 0 100px;
Code language: CSS (css)

Это короткая запись для:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
Code language: CSS (css)

В Bootstrap разметка с одной фиксированной колонкой выглядит так:

<div class="container-fluid d-flex">
    <div style="flex: 0 0 100px; background: yellow;">
        fixed 100px
    </div>
    <div class="col" style="background: blue;">
        1
    </div>
    <div class="col" style="background: red;">
        2
    </div>
</div>
Code language: HTML, XML (xml)

Сделать чтобы блоки перемещались на новую строку, если они не влезают по ширине:

flex-wrap: wrap;
Code language: CSS (css)

Как быть, если внутренним блокам надо задать padding, но родитель не должен вылезать за контейнер:

#parent {
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
}
#parent > div {
    padding: 15px;
}
Code language: CSS (css)