Используйте свойство flex-direction для создания строки
Добавление display: flex
к элементу превращает его в гибкий контейнер. Это позволяет разместить любые дочерние элементы этого элемента в строки или в столбцы. Чтобы сделать это, нужно добавить свойство flex-direction
к родительскому элементу и устанавить ему значение row (строка) или column (столбец). Значение row выравнивает дочерние элементы по горизонтали, а значение column выравнивает дочерние элементы по вертикали. Другие варианты значений свойства flex-direction
- row-reverse (обращённая строка) и column-reverse (обращённый столбец). Примечание
Значением по умолчанию для свойства flex-direction
является row.
Добавьте CSS свойство flex-direction
элементу #box-container
и присвойте ему значение row-reverse.