Flexbox - Продвинутые техники веб-разработки - ADivC

Введение в Flexbox

До сих пор размещали элементы друг за другом сверху вниз. Заголовок, потом картинка, потом текст, потом кнопка. Как столбик кирпичей. Но посмотрите на сайт ADC. В секции «Контакты» видите информацию в два столбца? Слева «По вопросам поступления» с телефоном и почтой, справа «По общим вопросам» с другим телефоном. Элементы расположены горизонтально, рядом друг с другом.

Без специальных инструментов — это сложно. Раньше использовали таблицы или float. Получалось громоздко и хрупко. Теперь есть Flexbox. Flexible Box Layout, гибкая блочная раскладка. Современный способ размещать элементы в ряд или столбец, выравнивать их, распределять пространство.

Flexbox — это как коробка с отделениями. Коробка — это контейнер. Отделения — это элементы внутри. Говорите коробке: расположи отделения в ряд или в столбец, прижми их к краю или по центру, растяни на всю ширину или оставь как есть. Коробка выполняет команды.

Секция «Контакты» с двумя колонками

Посмотрите на секцию «Контакты» ADC. Две колонки с информацией расположены горизонтально. Создайте HTML структуру:

HTML

<section class="contacts-section">
  <h2>Контакты</h2>
  <p class="contacts-intro">
    По общим вопросам и вопросам поступления, а также ссылки на официальные сайты
  </p>

  <div class="contacts-grid">
    <div class="contact-column">
      <p class="contact-label">По вопросам поступления</p>
      <p class="contact-phone">+7 499 444-02-84</p>
      <p class="contact-email">design@hse.ru</p>
    </div>

    <div class="contact-column">
      <p class="contact-label">По общим вопросам</p>
      <p class="contact-phone">+7 495 621-87-11</p>
    </div>

    <div class="contact-column">
      <p class="contact-label">Дополнительное образование</p>
      <p class="contact-phone">dop-design@hse.ru</p>
    </div>

    <div class="contact-column">
      <p class="contact-label">Адрес</p>
      <p class="contact-phone">129110, г. Москва, ул. Пантелеевская, д. 53.</p>
    </div>
  </div>
</section>

Без стилей колонки расположатся друг под другом. Каждый <div> блочный элемент, занимает всю ширину. Чтобы расположить их рядом, примените Flexbox к контейнеру:

CSS

.contacts-grid {
  display: flex;
  gap: 54px 234px;
  flex-wrap: wrap;
}

Сохраните. Обновите страницу. Видите? Колонки встали в ряд. Одно свойство display: flex превратило контейнер в flex-контейнер. gap обозначает отступы между элементами. Первое значение по горизонтали, второе — по вертикали. Вертикальный отступ работает здесь благодаря flex-wrap: wrap. Это свойство позволяет элементам переноситься. Если ширины не хватает, элемент перейдёт на следующую строку. nowrap запрещает перенос (по умолчанию).

Хедер с равномерным распределением

В хедере чуть другая ситуация, там элементы располагаются на одинаковом расстоянии друг от друга. Это нам помогает сделать также flex.

HTML

<header>
  <div class="gradient-bg"></div>

  <img src="logo.png" alt="Логотип ADC" class="logo-image">

  <a href="history.html" class="nav-link">Наша история</a>

  <a href="https://t.me/artdesigncoding">
    <img src="telegram.png" alt="Telegram ADC" class="logo-telegram-small">
  </a>
</header>

Добавим хедеру стили:

CSS

header {
  display: flex;
  width: 1818px;
  justify-content: space-between;
  align-items: center;
}

justify-content: space-between позволяет нам как раз сделать равное расстояние между элементами, он отвечает за горизонтальное расположение. align-items — за вертикальное. Значение center говорит браузеру, что все элементы находятся по центру относительно горизонтальной оси.

Вертикальное расположение с flex-direction

Далее давайте обернём весь наш контентный блок после большой картинки в div, ведь между блоками основными у нас одинаковое расстояние

HTML

<main>
  <section>
    <h1>ADC</h1>

    <img src="main.png" alt="Митап в Школе дизайна" class="main-picture" />
  </section>

  <section>
    <hr />

    <p>
      Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ,
      расположенное в историческом здании на Пантелеевской, 53. Это место,
      где встречаются разработчики с бизнесом, авторы со зрителями,
      профессионалы креативной экономики с широкой аудиторией.
    </p>

    <!-- Весь код ниже -->
  </section>

  <section class="about-section">
    <h2>Наш ADC</h2>

    <!-- Весь код ниже -->
  </section>

  <section class="programs-section">
    <h2>Что изучают студенты ADC</h2>

    <!-- Весь код ниже -->
  </section>

  <section>
    <img src="hub.png" alt="Creative Hub" />

    <h2>Записаться на мероприятие</h2>
    <form class="contact-form" id="eventForm">

      <!-- Весь код ниже -->

    </form>
  </section>

  <section class="contacts-section">
    <h2>Контакты</h2>

    <!-- Весь код ниже -->

    <div class="contacts-grid">
      <div class="contact-column">
        <p class="contact-label">По вопросам поступления</p>
        <p class="contact-phone">+7 499 444-02-84</p>
        <p class="contact-email">design@hse.ru</p>
      </div>

      <!-- Весь код ниже -->

    </div>
  </section>
</main>

Для тега main добавим стили:

CSS

main {
  display: flex;
  width: 1048px;
  flex-direction: column;
  gap: 120px;
}

flex-direction даёт браузеру понять как мы хотим расположить элементы: вертикально или горизонтально. column означает вертикальное расположение.

Блок «Наш ADC» с комбинированной раскладкой

У нас есть блок «Наш ADC» с картинкой, тут есть и вертикальное расположение блоков и горизонтальное. Давайте добавим.

HTML

<section class="about-section">
  <h2>Наш ADC</h2>

  <div class="card-wrapper">
    <img src="students.png" alt="Студенты Школы дизайна" class="hero-image" />

    <div class="content-card-wrapper">
      <div class="text-card-wrapper">
        <h3>Наша история</h3>
        <p>
          История создания и развития ADC — как идея объединения дизайна
          и программирования переросла в активное комьюнити.
        </p>
      </div>
      <button class="button-click" id="historyBtn">Посмотреть</button>
    </div>
  </div>
</section>

Добавим стили:

CSS

.card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.content-card-wrapper {
  display: flex;
  justify-content: space-between;
}

.text-card-wrapper {
  display: flex;
  width: 817px;
  flex-direction: column;
  gap: 24px;
}

Секция «Что изучают студенты ADC»

Посмотрим на секцию «Что изучают студенты ADC». Здесь есть тоже схожие расстояния между элементами.

HTML

<section class="programs-section">
  <h2>Что изучают студенты ADC</h2>

  <div class="programms-wrapper">
    <div class="program-item">
      <h3 class="program-title">Веб-вёрстка и веб-программирование</h3>
      <p class="program-description">
        HTML, CSS, JavaScript, создание многостраничных сайтов
      </p>
      <hr />
    </div>

    <div class="program-item">
      <h3 class="program-title">UX/UI дизайн и прототипирование</h3>
      <p class="program-description">Figma, FigJam, интерактивные прототипы</p>
      <hr />
    </div>

    <div class="program-item">
      <h3 class="program-title">
        Креативное программирование, генеративная графика
      </h3>
      <p class="program-description">Статичные и динамические веб-плакаты</p>
      <hr />
    </div>
  </div>
</section>

Добавим и сюда flex:

CSS

.programs-section, .programms-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.program-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

Стилизация формы

И последний блок, который нам осталось стилизовать при помощи flex — это форма

HTML

<form class="contact-form" id="eventForm">
  <div class="all-inputs">
    <input
      type="text"
      placeholder="Имя"
      class="form-input"
      id="nameInput"
      required
    />
    <input
      type="text"
      placeholder="Фамилия"
      class="form-input"
      id="surnameInput"
      required
    />
    <input
      type="tel"
      placeholder="Номер телефона"
      class="form-input"
      id="phoneInput"
      required
    />
  </div>
  <button type="submit" class="submit-button">Отправить</button>
</form>

Добавим flex:

CSS

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.all-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

Основные свойства Flexbox

Запомните главное. display: flex делает элемент flex-контейнером. justify-content выравнивает элементы по горизонтали. align-items выравнивает по вертикали. gap добавляет отступы между элементами. flex-direction меняет направление раскладки. flex-wrap разрешает перенос элементов.

В качестве домашнего задания пропишите flex для всех блоков на странице статьи.

Какое свойство превращает элемент в flex-контейнер?

flex-container: true;

flexbox: enable;

display: flex;

layout: flex;

За что отвечает свойство justify-content?

За выравнивание элементов по вертикали

За выравнивание элементов по горизонтали

За отступы между элементами

За направление раскладки элементов

Выберите все корректные значения для flex-direction: