Строчно-блочный родитель флекс элементов в CSS

Вместо значения flex для свойства display родителю можно поставить значение inline-flex. В этом случае этот родитель будет вести себя, как строчно-блочный элемент.

Например, если не задать ширину родителя, то его ширина сформируется шириной потомков:

<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>

.parent { display: inline-flex; border: 1px solid red; } .child { width: 50px; height: 50px; border: 1px solid green; }

Результат выполнения кода:

uz ru