Flexbox – это мощный модуль макета CSS, который предоставляет разработчикам гибкие и эффективные способы создания адаптивного и динамичного веб-дизайна. Одним из ключевых свойств Flexbox является свойство justify-contentflex-end в сочетании с Bootstrap, популярной платформой CSS, для достижения различных конфигураций макета.

Метод 1: базовый контейнер Flexbox

<div class="d-flex justify-content-end">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Метод 2: Flexbox с сеткой Bootstrap

<div class="d-flex">
  <div class="flex-grow-1"></div>
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Метод 3: Flexbox с столбцами Bootstrap

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col d-flex justify-content-end">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>
</div>

Метод 4: Flexbox с служебными классами Bootstrap

<div class="d-flex justify-content-end">
  <div class="me-auto"></div>
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Метод 5: Flexbox с пользовательским CSS

flex-end;
/* дополнительные пользовательские стили */

Свойство flex-end во Flexbox в сочетании с гибкой системой сеток Bootstrap и служебными классами позволило нам изучить различные методы выравнивания гибких элементов по концу контейнера. Эти методы дадут вам возможность создавать визуально привлекательные и адаптивные макеты для ваших веб-проектов. Поэкспериментируйте с этими примерами кода и дайте волю своему творчеству!