Разница между использованием display: contents и display: flex для создания контейнеров заключается в их функциях.

Display: contents скрывает элемент для своего окружения, но дочерние элементы продолжают существовать в структуре страницы, становясь на его место. 1 При этом сохраняется стилизация элементов. 1

Display: flex, в свою очередь, создаёт флекс-контейнер и контекст, в котором существуют флекс-элементы. 1 Контейнер в этом случае растягивается на всю ширину и имеет своё полное пространство среди окружающих блоков. 4 Происходит перенос строк в начале и в конце блока. 4

Таким образом, display: contents больше подходит для скрытия элемента и сохранения стилизации его дочерних элементов, а display: flex — для создания контейнера, в котором можно контролировать различные параметры элементов, включая направление, порядок, ширину, высоту и другие. 14