Как разместить элементы в одну строку с одинаковым отступом между ними?

Как разместить элементы в одну строку с одинаковым отступом между ними?

Решение с Flexbox (рекомендуется)

Flexbox — это идеальный выбор для распределения элементов с равными отступами:

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

// === CSS / Tailwind ===

// Способ 1: justify-content: space-between (отступ только между элементами)
.container {
  display: flex;
  justify-content: space-between;
}

// Способ 2: justify-content: space-around (отступ со всех сторон, одинаковый)
.container {
  display: flex;
  justify-content: space-around;
}

// Способ 3: justify-content: space-evenly (равномерное распределение)
.container {
  display: flex;
  justify-content: space-evenly;
}

// Способ 4: gap (самый современный и чистый)
.container {
  display: flex;
  gap: 16px; // отступ между элементами
  // Элементы НЕ прилипают к краям
}

// Способ 5: gap + flex (растягивание на всю ширину)
.container {
  display: flex;
  gap: 16px;
  justify-content: space-between; // элементы распределяются, gap между ними
}

В Tailwind CSS

// === React компонент с Tailwind ===

export function HorizontalLayout() {
  return (
    // Способ 1: justify-between (элементы прижимаются к краям)
    <div className="flex justify-between">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>

    // Способ 2: justify-around (равный отступ со всех сторон)
    <div className="flex justify-around">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>

    // Способ 3: gap (отступ между элементами, Tailwind 3+)
    <div className="flex gap-4">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>

    // Способ 4: gap + justify-center (центр с отступами между)
    <div className="flex gap-4 justify-center">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>

    // Способ 5: gap + justify-between (полное растягивание)
    <div className="flex gap-4 justify-between w-full">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  );
}

CSS Grid (альтернатива)

/* === Grid с равномерным распределением === */

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 колонки, каждая занимает одинаковую ширину */
  gap: 16px;
  /* отступ между элементами */
}

/* === Grid с автоматическим количеством колонок === */
.container {
  display: grid;
  grid-auto-flow: column;
  /* элементы идут горизонтально */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  /* минимум 100px, максимум равная доля */
  gap: 16px;
}

/* === Grid с одной строкой === */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.item {
  /* Все элементы в одну строку автоматически */
}

Сравнение методов

// ===== МЕТОДЫ И ИХ РАЗЛИЧИЯ =====

// 1. space-between: элементы у краёв, между ними равный отступ
// [Item1]          [Item2]          [Item3]

// 2. space-around: равный отступ со всех сторон (но внутренние отступы больше)
//   [Item1]        [Item2]        [Item3]

// 3. space-evenly: ИДЕАЛЬНО равномерно (отступ везде одинаковый)
//  [Item1]   [Item2]   [Item3]   [Item4]

// 4. gap: простой отступ между элементами, сами элементы не растягиваются
// [Item1] <gap> [Item2] <gap> [Item3]

// === Практический пример: навигация сайта ===

export function Navigation() {
  return (
    <nav className="flex gap-8 px-4">
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/services">Services</a>
      <a href="/contact">Contact</a>
    </nav>
    // Результат: Home  About  Services  Contact
    //            (одинаковый отступ 8px между ними)
  );
}

// === Пример: кнопки в один ряд ===

export function ButtonGroup() {
  return (
    <div className="flex gap-3 justify-end">
      <button className="bg-gray-300">Cancel</button>
      <button className="bg-blue-500">Submit</button>
    </div>
    // Результат: [Cancel]  [Submit]  (справа, с отступом 3px между ними)
  );
}

// === Пример: товары в магазине ===

export function ProductList() {
  const products = ['Product 1', 'Product 2', 'Product 3', 'Product 4'];
  
  return (
    <div className="flex gap-4 justify-between w-full">
      {products.map(product => (
        <div key={product} className="flex-1">
          {product}
        </div>
      ))}
    </div>
    // flex-1 — каждый товар занимает одинаковую ширину
    // justify-between — максимальное растягивание
    // gap-4 — отступ между товарами
  );
}

Продвинутые сценарии

// === Элементы разной ширины, но равный отступ между ними ===

export function ResponsiveLayout() {
  return (
    <div className="flex gap-4">
      <div className="w-32">Sidebar</div>  {/* 128px */}
      <div className="flex-1">Content</div> {/* остальное место */}
      <div className="w-24">Widget</div>   {/* 96px */}
    </div>
    // Результат:
    // [Sidebar]<gap>[       Content       ]<gap>[Widget]
  );
}

// === Элементы в центре с отступом ===

export function CenteredItems() {
  return (
    <div className="flex gap-6 justify-center items-center">
      <img src="logo.png" alt="Logo" />
      <h1>Title</h1>
      <button>Action</button>
    </div>
    // justify-center — центр по горизонтали
    // items-center — центр по вертикали
    // gap-6 — отступ между элементами
  );
}

// === Обёртка с переносом на новую строку ===

export function WrappingLayout() {
  return (
    <div className="flex flex-wrap gap-4">
      {items.map(item => (
        <div key={item.id} className="w-48">
          {item.name}
        </div>
      ))}
    </div>
    // flex-wrap — элементы переносятся на новую строку
    // gap-4 — отступ между всеми элементами (в т.ч. по вертикали)
  );
}

Лучшие практики

// OK: Используй gap

<div className="flex gap-4">
  <button>Cancel</button>
  <button>Submit</button>
</div>

// NOT OK: Старый способ с margin

<div className="flex">
  <button className="mr-4">Cancel</button>  {/* margin-right */}
  <button>Submit</button>
</div>

// OK: gap для всех осей

<div className="flex flex-wrap gap-4">
  {/* gap работает для строк И для колонок */}
</div>

// NOT OK: space-between для мало элементов

<div className="flex justify-between">
  <button>One</button>  {/* у левого края */}
  <button>Two</button>  {/* у правого края */}
</div>
// Лучше: flex gap-4 justify-center