Как в Flexbox выровнять элементы по центру и справа

Быстрый ответ

Освойте методику настройки стиля: центрируйте один элемент в flex-контейнере и выравнивайте другой по краю, применив justify-content: center для контейнера и назначив margin-left: auto элементу справа.

<div style="display: flex; justify-content: center;">
  <div>По центру</div>
  <div style="margin-left: auto;">Справа</div>
</div>

Этот метод позволит поместить первый дочерний элемент строго в центр, а второй — прижать к правой границе контейнера.

Применяем автоматические отступы

Добавьте прецизионного контроля в позиционирование элементов с автоматическими отступами. Они не только дают возможность управлять расположением, но и обеспечивают гибкость в верстке. Примените этот трюк для текстовых блоков, изображений или кнопок call-to-action (CTA):

• margin: auto: Центрирует элемент как горизонтально, так и вертикально.
• margin-left: auto: Перемещает элемент к правомую границу, создавая приятную визуальную гармонию.
• margin-right: auto: Отталкивает элемент к левой границе — ведь и она имеет значение.

Воспользуйтесь этими настройками для создания балансированного макета:

<div style="display: flex; justify-content: flex-start;">
  <div>Слева, будто не проще.</div>
  <div style="margin-left: auto; margin-right: auto;">Яя не уйду!</div>
  <div>Еще один блок, выровненный справа.</div>
</div>

Визуализация

Представьте, что ваша гостиная — это ваш холст. Вы дополняете ее двумя произведениями искусства. И следует делать это обдуманно:

🛋️ Расстановка в гостиной 🛋️
|--------------🖼️ Центральное изображение --------------|
|                                           ----🖼️ Изображение справа ----|

Flexbox станет вашим надежным ассистентом в оформлении интерьера. Рассмотрим это на примере:

.living-room {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.centered-art {
  flex: 1;
  text-align: center;
  /* Кто теперь в центре внимания? */
}

.right-leaning-art {
  margin-left: auto;
  /* Для меня нет границ! */
}

Центральное изображение элегантно центрируется, имея одинаковое пространство с обеих сторон.

Изображение справа не излагает какие-либо политические настроения — ему просто нравится правая стена.

Используем абсолютное позиционирование

У вас в наличии мощный прием — абсолютное позиционирование. Этот инструмент может быть крайне эффективным в умелых руках и разрушающим, если использовать его неумело:

<div style="display: flex; position: relative;">
  <div style="position: absolute; left: 50%; transform: translateX(-50%);">По центру <!-- Неожиданное развитие событий. --></div>
  <div>Справа <!-- Соло для одного. --></div>
</div>

Обратите внимание, как центрированный div становится главным актером вечеринки. Но будьте внимательны: абсолютное позиционирование может быть причиной проблем в верстке.

Применение flex-grow для достижения гармонии

Чувство гармонии визуально важно в дизайне. Свойство flex-grow помогает сохранить баланс в макете, даже если некоторые элементы решат "забрать" себе больше пространства:

• flex-grow: 0; препятствует увеличению размера элемента, фиксируя его.
• flex-grow: 1; позволяет элементам расширяться и занимать свободное пространство.

Пример от профессионала по имени Пит:

.centered-item {
  flex-grow: 0; /* Стабильность — прежде всего. */
}

.surrounding-items {
  flex-grow: 1; /* Возьмем немного больше места? Конечно. */
}

Полезные материалы

1. Основы Flexbox – MDN – Детальное понимание flexbox перевернет ваше восприятие верстки.
2. Освоение Flexbox – CSS-Tricks – Исчерпывающее руководство по Flexbox, настоящий ориентир для разработчиков.
3. Flexbox Froggy – Изучение основ flexbox в игровой форме.
4. Свойство CSS align-items – Здесь W3Schools приводит наглядное описание свойства align-items.
5. Flexbox – Codrops – Визуальное пособие, которое поможет вам глубже погрузиться в особенности Flexbox.
6. Почему в Flexbox нет "justify-items" или "justify-self"? – Stack Overflow – Дискуссия о тонкостях гибкого выравнивания элементов в Flexbox.