Разница между flex и inline-flex в CSS заключается в том, как элементы взаимодействуют с окружающими элементами. 1

flex — элемент растягивается на всю ширину и имеет своё полное пространство среди окружающих блоков. 1 Происходит перенос строк в начале и в конце блока. 1

inline-flex — элемент обтекается другими элементами. 1 При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. 1 Размеры элемента зависят только от внутреннего контента, он встаёт в строку с другими элементами. 5

Таким образом, flex создаёт контейнер, в котором дочерние элементы становятся элементами flex, а все элементы становятся гибкими и могут перемещаться как по вертикали, так и по горизонтали. 2 Inline-flex создаёт контейнер, который ведёт себя как встроенный элемент: не заставляет переносить строку и может располагаться рядом с другими встроенными элементами на веб-странице. 4