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

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

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