Выравнивание элементов по центру и слева с flexbox в CSS

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

Применяйте комбинацию свойств justify-content: space-between; и псевдоэлемента, чтобы равномерно разделить пространство между элементами внутри flex-контейнера.

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
  }
  .flex-container::after {
    content: '';
    flex: 1;  // Ключевое свойство для равномерного заполнения пространства
  }
</style>

<div class="flex-container">
  <div>Слева</div>
  <div style="text-align: center; flex: 2;">Центр</div>
</div>

Стиль .flex-container обеспечивает создание гибкой разметки, justify-content: space-between; равномерно разделяет пространство между элементами. Используя псевдоэлемент ::after, вы можете центрировать объект без внесения изменений в HTML-разметку. Для точного позиционирования центрального элемента задайте text-align: center; и flex: 2;.

Продвинутые техники

Рассмотрим подробнее методики реализации сложного выравнивания, когда базового инструментария недостаточно.

Управление сложными макетами при помощи CSS Grid

Для работы со сложной структурой макетов и обеспечения единообразия выравнивания на дисплеях различного размера лучшим средством является CSS Grid:

.container {
  display: grid;
  grid-template-columns: auto 1fr auto;  // Разделение пространства на три равные части.
  align-items: center;
}

.left-item {
  grid-column: 1;  // Занимает первую колонку.
}

.center-item {
  grid-column: 2;  // Занимает центральную колонку.
  text-align: center;
}

.right-spacer {
  grid-column: 3;  // Невидимый элемент, обеспечивающий баланс распределения пространства.
}

Свойство grid-template-columns определяет колонки для контейнера, а каждый элемент теперь можно расположить там, где это необходимо. [SecondParagraphVideo]

Центрирование в контейнере с фиксированной высотой

Если необходимо выровнять элементы в контейнере с фиксированной высотой, получится центрировать их с помощью автоматических отступов:

.flex-container {
  display: flex;
  height: 100px; /* Определение точных размеров контейнера для выравнивания */
}

.left-item {
  margin-right: auto; // Автоматический отступ справа обеспечивает выравнивание по левому краю.
}

.center-item {
  margin: auto; // Центрирование элемента.
}

Применение псевдоэлементов для оптимизации кода

Для сохранения HTML-разметки чистой и без лишних элементов используйте псевдоэлементы ::before или ::after, настроенные с применением свойств flex:

.flex-container {
  display: flex;
}

.left-item,
.flex-container::before {
  flex: 1;  // Равномерное распределение пространства.
}

.center-item {
  flex: 2;  // Получает двойную порцию пространства в контейнере.
  text-align: center;
}

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

Схема распределения элементов с использованием Flexbox находит аналогию в организации лагерной стоянки:

🏕️ Лагерь: [🔥, 🌳, ⛺, 🌳]
# 🔥 – Костер расположен слева
# 🌳 – Деревья служат промежутками между объектами
# ⛺ – Палатка расположена в центре

Для создания подобной структуры примените Flexbox:

.camp-setup {
  display: flex;
  justify-content: space-between; // Обеспечивает интервалы между объектами
}

.fire {
  align-self: flex-start; // Позиционирует костер слева
}

.tent {
  align-self: center; // Размещает палатку в центре
}

Применяя Flexbox и его ассоциацию с организацией лагеря, можно достичь сбалансированного визуального представления.

До: [🔥, ⛺]
После: [🔥, 🌳, ⛺, 🌳]

Решение нестандартных ситуаций

В условиях сложной настройки выравниваний используйте нестандартные приемы для достижения желаемого результата.

Применение отрицательных маржинов

Отрицательные маржины могут оказаться полезными при работе с динамическим содержимым или асимметричными отступами.

.center-item {
  margin-left: -50px; /* Этот маржин работает как регулируемая скамейка. */
}

Работа с элементами неизвестной ширины

Если ширина левого элемента не известна, воспользуйтесь копией этого элемента и задайте ей visibility: hidden;. Это поможет сохранить центральный элемент на его месте.

.flex-container::before,
.flex-container::after {
  content: '';
  flex: 1;
  visibility: hidden; // Элемент невидим, однако место занимает.
}

Имейте в виду, что ваш код должен быть аккуратным и адаптивным. Постоянное совершенствование и практика в конечном счете придут к успеху!

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

1. Полное руководство по Flexbox | CSS-Tricks
2. Основные концепции Flexbox – CSS: Каскадные таблицы стилей | MDN
3. Что происходит, когда вы создаете flex-контейнер? — Smashing Magazine
4. Flexbox Froggy – Игра для изучения CSS Flexbox
5. Почему в Flexbox нет свойств "justify-items" и "justify-self"? – Stack Overflow
6. Can I use... Поддержка веб-стандартов HTML5, CSS3 и прочего