Здравствуйте!
Если элементы в flex-контейнере не располагаются в один ряд и вместо этого растягиваются, это может быть результатом того, что у элементов или контейнера установлены некоторые CSS-свойства, влияющие на это поведение.
1. **Размеры элементов**: Если элементы внутри flex-контейнера имеют фикспированные размеры, они могут не умещаться в одной строке. Убедитесь, что общая ширина элементов не превышает ширину контейнера.
2. **Свойство `flex-wrap`**: Проверьте значение свойства `flex-wrap`. По умолчанию оно установлено на `nowrap`, что означает, что элементы будут пытаться оставаться на одной строке. Если установлено значение `wrap`, элементы будут переноситься на следующую строку, если они не помещаются в одной строке. Попробуйте установить `flex-wrap: nowrap;`.
3. **Свойства `flex` для детей**: Убедитесь, что у ваших flex-элементов установлен правильный размер или значение `flex`, чтобы они не растягивались внезапно. Например:
```css
.item {
flex: 0 0 auto; /* Элементы не растягиваются и не сжимаются */
}
```
Чтобы выровнять элементы в flex-контейнере по правому краю, вам нужно использовать свойство `justify-content`. Например:
```css
.container {
display: flex;
justify-content: flex-end; /* Выровнять элементы по правому краю */
}
```
Этот код выровняет все дочерние элементы контейнера по правому краю. Если у вас есть дополнительные вопросы или если нужно больше деталей, не стесняйтесь спрашивать!