Flexbox CSS3: Быстрый старт за 20 минут

Flexbox — современный способ позиционирования блоков в CSS3, значительно упрощающий и улучшающий процесс верстки. Он позволяет легко управлять расположением элементов, их порядком и адаптивностью под разные размеры экранов, избавляя от сложных вычислений и использования устаревших методов, таких как float: left и float: right.

Что такое Flexbox?

Flexbox — новый подход к позиционированию блоков с помощью CSS3. В отличие от старых методов, требующих ручных вычислений ширины, отступов (margin, padding) и позиционирования (float: left, float: right), Flexbox упрощает все эти задачи. Он делает разработку сайтов проще и эффективнее, предоставляя более функциональный и гибкий способ управления блоками. Flexbox-элементы отлично адаптируются как к настольным, так и к мобильным версиям сайтов.

Работа с Flexbox: пример

Создадим три блока (<div>) внутри основного контейнера (<div> с классом container):

<div class="container">
  <div class="box">
    <h3>Бокс 1</h3>
    <p>Текст первого блока.</p>
  </div>
  <div class="box">
    <h3>Бокс 2</h3>
    <p>Текст второго блока.</p>
  </div>
  <div class="box">
    <h3>Бокс 3</h3>
    <p>Текст третьего блока.</p>
  </div>
</div>

Добавим базовый CSS для стилизации:

.container {
  width: 300px;
  border: 1px solid silver;
  padding: 10px;
}

.box {
  border: 1px solid silver;
}

Чтобы расположить блоки в один ряд, зададим свойство display: flex для родительского контейнера:

.container {
  display: flex;
  /* ... другие стили ... */
}

Управление элементами

Свойство flex управляет размером элементов. Например, flex: 2 для первого блока сделает его вдвое шире, чем блоки с flex: 1. Свойство order меняет порядок элементов без изменения HTML-кода. order: 2 для первого блока поместит его на второе место. align-items контролирует вертикальное выравнивание элементов: flex-start (по умолчанию), flex-end, center. justify-content управляет горизонтальным выравниванием: flex-start (по умолчанию), flex-end, center, space-around, space-between. flex-basis позволяет более тонко настраивать размеры и отступы.

.box:nth-child(1) { flex: 2; order: 2; }
.box:nth-child(2) { flex: 2; }
.box:nth-child(3) { flex: 1; order: 3; }

Адаптивность с Media Queries

Media Queries позволяют создавать адаптивные макеты. При ширине экрана меньше 500 пикселей можно изменить порядок элементов или переносить их на новые строки с помощью свойства flex-wrap:

@media (max-width: 500px) {
  .container {
    flex-wrap: wrap;
  }
}

Flexbox предоставляет мощные инструменты для создания гибких и адаптивных макетов. Он упрощает работу с позиционированием и порядком элементов, значительно повышая эффективность разработки веб-сайтов. Использование Flexbox предпочтительнее старых методов, таких как float.