PrepBro
← Назад к вопросам

Как работает flexbox?

1.0 Junior🔥 141 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Flexbox: полное руководство

Flexbox это мощная система макетирования CSS, которая революционизировала создание адаптивных интерфейсов. Она использует контейнер (flex container) и элементы внутри (flex items).

Основные концепции Flexbox

Flexbox работает на двух уровнях: контейнер и элементы. Контейнер определяет поведение элементов внутри.

/* Создание flex контейнера */
.flex-container {
  display: flex;
  /* После этого все прямые потомки становятся flex items */
}

Основные свойства контейнера

.container {
  display: flex;
  
  /* Направление потока элементов */
  flex-direction: row; /* row, column, row-reverse, column-reverse */
  
  /* Перенос элементов на новую строку */
  flex-wrap: wrap; /* nowrap, wrap, wrap-reverse */
  
  /* Выравнивание по главной оси */
  justify-content: center; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
  
  /* Выравнивание по поперечной оси */
  align-items: center; /* flex-start, flex-end, center, stretch, baseline */
  
  /* Выравнивание нескольких строк */
  align-content: center; /* flex-start, flex-end, center, space-between, space-around */
  
  /* Расстояние между элементами */
  gap: 1rem; /* или gap: 1rem 2rem (вертикальное горизонтальное) */
}

Flex контейнер в действии

// HTML
<div className="flex-container">
  <div className="item">Item 1</div>
  <div className="item">Item 2</div>
  <div className="item">Item 3</div>
</div>

// CSS
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: #f0f0f0;
  padding: 2rem;
}

.item {
  background: #007bff;
  color: white;
  padding: 1rem;
  border-radius: 4px;
}

Flex направления

/* Основное направление (левая-правая) */
.row {
  flex-direction: row;
}

/* Столбец (сверху-снизу) */
.column {
  flex-direction: column;
}

/* Обратное направление */
.row-reverse {
  flex-direction: row-reverse;
}

.column-reverse {
  flex-direction: column-reverse;
}

Justify-content: выравнивание по главной оси

/* Выравнивание слева */
.flex-start {
  justify-content: flex-start;
}

/* Выравнивание справа */
.flex-end {
  justify-content: flex-end;
}

/* Центр */
.center {
  justify-content: center;
}

/* Равные промежутки между элементами */
.space-between {
  justify-content: space-between;
}

/* Равные промежутки вокруг каждого элемента */
.space-around {
  justify-content: space-around;
}

/* Полностью равномерное распределение */
.space-evenly {
  justify-content: space-evenly;
}

Align-items: выравнивание по поперечной оси

/* Начало */
.flex-start {
  align-items: flex-start;
}

/* Конец */
.flex-end {
  align-items: flex-end;
}

/* Центр */
.center {
  align-items: center;
}

/* Растяжение на всю высоту */
.stretch {
  align-items: stretch; /* по умолчанию */
}

/* Выравнивание по базовой линии текста */
.baseline {
  align-items: baseline;
}

Свойства flex элементов

.flex-item {
  /* Коэффициент роста (сколько свободного места занять) */
  flex-grow: 1;
  
  /* Коэффициент сжатия */
  flex-shrink: 1;
  
  /* Базовый размер перед распределением */
  flex-basis: auto;
  
  /* Сокращённое свойство */
  flex: 1; /* эквивалент: flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
  
  /* Выравнивание конкретного элемента */
  align-self: center;
  
  /* Порядок элементов */
  order: 1;
}

React компонент с Flexbox

export function FlexLayout() {
  return (
    <div className="flex gap-4 justify-between items-center p-4">
      <div className="flex-1 bg-blue-100 p-4">Sidebar</div>
      <div className="flex-1 bg-green-100 p-4">Main Content</div>
      <div className="flex-1 bg-red-100 p-4">Right Sidebar</div>
    </div>
  );
}

// Tailwind CSS классы для flexbox
// flex -> display: flex
// gap-4 -> gap: 1rem
// justify-between -> justify-content: space-between
// items-center -> align-items: center
// flex-1 -> flex: 1 1 0%

Практический пример: центрирование элемента

// Центрирование по обеим осям
const CenteredBox = () => (
  <div className="flex justify-center items-center h-screen">
    <div className="bg-white p-8 rounded-lg shadow-lg">
      <h1>Центрированный контент</h1>
    </div>
  </div>
);

// CSS версия
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Flex-wrap для адаптивных макетов

/* По умолчанию элементы не переносятся */
.nowrap {
  flex-wrap: nowrap;
}

/* Элементы переносятся на новую строку при необходимости */
.wrap {
  flex-wrap: wrap;
}

/* Переносятся в обратном порядке */
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

Сложный пример: навигационное меню

export function Navigation() {
  return (
    <nav className="flex gap-4 p-4 bg-gray-800">
      <div className="flex-1">
        <a href="/" className="text-white">Logo</a>
      </div>
      
      <div className="flex gap-6">
        <a href="/about" className="text-white">About</a>
        <a href="/services" className="text-white">Services</a>
        <a href="/contact" className="text-white">Contact</a>
      </div>
      
      <div>
        <button className="bg-blue-500 text-white px-4 py-2">Login</button>
      </div>
    </nav>
  );
}

// CSS
nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #1f2937;
}

nav > div {
  flex: 1; /* первый div берёт оставшееся место */
}

nav a {
  color: white;
}

Flex grow, shrink, basis

/* Элемент растёт в соотношении 1:2:3 */
.item1 { flex: 1; }
.item2 { flex: 2; }
.item3 { flex: 3; }

/* Минимальный размер перед распределением */
.min-size {
  flex-basis: 200px;
  flex-grow: 1;
}

/* Сжимается с коэффициентом 2 */
.shrink {
  flex-shrink: 2;
}

/* Не растёт и не сжимается */
.fixed {
  flex: 0 0 200px;
}

Порядок элементов с order

export function ReorderedList() {
  return (
    <div className="flex gap-4">
      <div style={{ order: 3 }}>Third</div>
      <div style={{ order: 1 }}>First</div>
      <div style={{ order: 2 }}>Second</div>
    </div>
  );
}

// Результат: First Second Third (порядок определяется order, не HTML)

Align-self для индивидуального выравнивания

export function AlignSelfExample() {
  return (
    <div className="flex items-start gap-4 h-48">
      <div className="bg-red-200 p-4">Top</div>
      <div className="align-self-center bg-green-200 p-4">Center</div>
      <div className="align-self-end bg-blue-200 p-4">Bottom</div>
    </div>
  );
}

// CSS
.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

Best Practices Flexbox

  1. Всегда определяй flex-direction - это основа всего
  2. Используй gap вместо margin - чище и понятнее
  3. Для выравнивания используй justify-content и align-items
  4. flex: 1 для равномерного распределения - часто используется в React
  5. flex-basis вместо width для flex items - более семантично
  6. align-self для исключений - когда один элемент отличается
  7. Тестируй адаптивность - flexbox должен работать на всех размерах

Когда использовать Flexbox

  • Навигационное меню
  • Выравнивание элементов по центру
  • Макеты две/три колонки
  • Кнопки в ряд
  • Карточки в сетке (flex-wrap)

Flexbox это основа современной веб-разработки, и его глубокое понимание критически важно для создания адаптивных интерфейсов.

Как работает flexbox? | PrepBro