Верстал ли на flex

Верстал ли на flex

Мой опыт с Flexbox

Да, я активно работаю с Flexbox в своих проектах. Это один из основных инструментов современной верстки, который я использую почти ежедневно.

Где я применяю Flexbox

1. Навигация и Header

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: white;
  border-bottom: 1px solid #e0e0e0;
}

.nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.2s;
}

2. Карточки и сетки

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 3rem;
}

.card {
  flex: 1 1 300px; /* Минимальная ширина 300px, растягивается */
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.card-content {
  flex: 1; /* Растягивается на весь оставшийся размер */
  padding: 1.5rem;
}

.card-footer {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e0e0e0;
}

3. Кнопки и элементы управления

.form-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

4. Центрирование контента (самый частый кейс)

/* Центр по горизонтали и вертикали */
.centered-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 100%;
}

/* Hero секция */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  text-align: center;
  padding: 2rem;
}

/* Иконка с текстом рядом */
.icon-text {
  display: flex;
  align-items: center;
  gap: 1rem;
}

5. Сложные лейауты

/* Двухколоночный лейаут */
.two-column {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.sidebar {
  flex: 0 0 300px; /* Фиксированная ширина */
}

.main {
  flex: 1; /* Растягивается на оставшееся место */
}

/* Отзывчивый лейаут */
@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
  }
  
  .sidebar {
    flex: 0 0 auto;
    width: 100%;
  }
}

Практические примеры из моего опыта

Пример 1: Карточка товара

<div class="product-card">
  <div class="product-image">
    <img src="product.jpg" alt="Product" />
  </div>
  <div class="product-info">
    <h3>Название товара</h3>
    <div class="rating">
      <span class="stars">5.0</span>
      <span class="reviews">(120 отзывов)</span>
    </div>
    <p class="price">$99.99</p>
    <button class="add-to-cart">В корзину</button>
  </div>
</div>

.product-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.rating {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.add-to-cart {
  width: 100%;
  padding: 0.75rem;
}

Пример 2: Фильтры и результаты

<div class="products-layout">
  <aside class="filters">Фильтры</aside>
  <div class="results">Результаты поиска</div>
</div>

.products-layout {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.filters {
  flex: 0 0 250px;
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 8px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.results {
  flex: 1;
}

@media (max-width: 768px) {
  .products-layout {
    flex-direction: column;
  }
  
  .filters {
    flex: 0 0 auto;
    position: static;
  }
}

Пример 3: Футер с колонками

.footer {
  background: #1a1a1a;
  color: white;
  padding: 3rem 2rem;
  margin-top: 5rem;
}

.footer-content {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section {
  flex: 1 1 250px;
}

.footer-section h4 {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.footer-section ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.footer-section a {
  color: #999;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-section a:hover {
  color: white;
}

Самые полезные flex свойства, которые использую

/* 1. Растягивание на оставшееся место */
.sidebar { flex: 1; }

/* 2. Без растягивания */
.logo { flex: 0 0 auto; }

/* 3. Фиксированная ширина */
.sidebar { flex: 0 0 300px; }

/* 4. Минимальная ширина с растягиванием */
.card { flex: 1 1 300px; }

/* 5. Пространство вокруг элементов */
.nav { 
  display: flex;
  justify-content: space-between; /* крайние слева и справа */
  justify-content: space-around;  /* равномерное распределение */
  justify-content: space-evenly;  /* разное для edge-to-edge */
}

/* 6. Выравнивание с gap вместо margin */
.buttons {
  display: flex;
  gap: 1rem; /* современнее, чем margin */
}

/* 7. Wrap для отзывчивости */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Когда я выбираю Flex vs Grid

/* Flex - для линейных лейаутов (одномерные) */
.flex-example {
  display: flex;
  gap: 1rem;
  /* Кнопки в ряд, навигация, hero-секции */
}

/* Grid - для двумерных лейаутов (таблицы, галереи) */
.grid-example {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  /* Равномерная сетка товаров */
}

/* Комбинация - Flex для overall лейаута, Grid для сеток */
.layout {
  display: flex;
  gap: 2rem;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

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

interface ButtonGroupProps {
  buttons: Array<{ id: string; label: string; onClick: () => void }>;
  direction?: 'row' | 'column';
}

export function ButtonGroup({ buttons, direction = 'row' }: ButtonGroupProps) {
  return (
    <div className="button-group" style={{ flexDirection: direction }}>
      {buttons.map(btn => (
        <button 
          key={btn.id}
          onClick={btn.onClick}
          className="button"
        >
          {btn.label}
        </button>
      ))}
    </div>
  );
}

.button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-direction: row;
}

.button {
  padding: 0.75rem 1.5rem;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.button:hover {
  background: #f5f5f5;
  border-color: #999;
}

Best Practices

Используй flex-basis вместо width для flex-элементов:

/* Правильно */
.item {
  flex: 0 0 200px;
  /* или */
  flex-basis: 200px;
}

/* Неправильно */
.item {
  width: 200px; /* может не работать как ожидается */
}

Для отзывчивости - используй flex-wrap и минимальные значения:

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex: 1 1 250px; /* Минимум 250px, растягивается на большых экранах */
}