flex

flex Убрать пространство между колонками/строками для переноса элементов. Аналог flew-grow для побочной оси

Используйте свойство align-content: https://developer.mozilla.org/ru/docs/We...

Свойсто align-content работает когда флекс-контейнер содержит переносы списка элементов (получаются строки или колонки, в засимости от значения flex-direction вашего флекс-контейнера), чтобы руководить расстоянием между этими строками-колонками свойство и помогает

Напр. убираем отступ между колонками:

[!] Flex css - Примеры верстки

См. список ниже

css flex Две колонки равной ширины, пример

<div class='root'>
        <div class='column'>Column1 fffffffff sfdfs </div>
        <div class='column'>Column2</div>     
 </div>

CSS:

.root {
 color: blue;
 margin: 20px;
 background-color: blanchedalmond;
 width: 200px;
 border-radius: 8px;
 padding: 5px;
 display: flex;
 flex-direction: row;
}

.column {
    background-color: beige;
    flex: 1;
}

.column:not(:first-child) {
    margin-left: 10px;
}

flex contaiter и остальные элементы в нормальном потоке

Если ваш элемент перемешается в начало родителя - просто убедесь, что предыдущие блоки имеют хоть какую-то ширину.

Subscribe to RSS - flex