В чем разница между display: flex и display: inline-flex?

Разница между display: flex и display: inline-flex в том, что в первом случае контейнер будет занимать всю ширину экрана (как блочный элемент), а во втором — лишь пространство, занимаемое его содержимым. skillbox.ru

display: flex превращает элемент в флекс-контейнер, внутри которого дочерние элементы начинают подчиняться свойствам флексбокса. doka.guide Снаружи флекс-контейнер выглядит как блочный элемент — занимает всю ширину родителя, следующие за ним элементы в разметке переносятся на новую строку. doka.guide

display: inline-flex заставляет контейнер вести себя как строчный (инлайн) элемент — размеры зависят только от внутреннего контента, контейнер встаёт в строку с другими элементами. doka.guide Внутри это такой же флекс-контейнер, как и при предыдущем значении. doka.guide