Сокращением каких свойств является Flex

Сокращением каких свойств является Flex

Flex — это сокращение для свойства flex-flow, которое объединяет три базовых свойства flexbox:

• flex-direction — направление гибкого контейнера (row, column, и т.д.)
• flex-wrap — переносятся ли элементы на новую строку
• flex-grow, flex-shrink, flex-basis — поведение элементов внутри контейнера

Однако на практике flex часто используется для комбинации трёх свойств элемента, а не контейнера:

/* Полная запись */
flex: flex-grow flex-shrink flex-basis;

/* Пример */
flex: 1 0 200px;
/* flex-grow: 1;        - элемент растёт на 1 часть */
/* flex-shrink: 0;      - элемент не сжимается */
/* flex-basis: 200px;   - базовая ширина 200px */

Что входит в flex сокращение

На контейнере (для display: flex):

/* display: flex само включает */
.container {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse | column-reverse */
  flex-wrap: nowrap;        /* nowrap | wrap | wrap-reverse */
  justify-content: flex-start; /* выравнивание по основной оси */
  align-items: stretch;     /* выравнивание по поперечной оси */
  align-content: stretch;   /* выравнивание линий контента */
  gap: 0;                   /* промежуток между элементами */
}

На элементе (flex-контейнера):

.item {
  flex-grow: 0;        /* множитель расширения (1 = 1 часть свободного места) */
  flex-shrink: 1;      /* множитель сжатия (1 = пропорционально сжимается) */
  flex-basis: auto;    /* базовый размер до расширения/сжатия */
  flex: flex-grow flex-shrink flex-basis; /* сокращение всех трёх */
}

Примеры использования flex

Пример 1: Базовое выравнивание

.container {
  display: flex;
  gap: 16px;
}

/* Элемент занимает 1 часть свободного места, базовая ширина 150px */
.item {
  flex: 1 0 150px;
}

/* Если контейнер 500px, свободное место = 500 - 450 (3*150) = 50px */
/* Каждый элемент получает по 50px: 150 + 16.67 = 166.67px */

Пример 2: Сокращенные значения

/* flex: 1 — полная форма: flex: 1 1 0% */
/* Элемент растёт, сжимается, базовая ширина 0 (занимает только то, что выросло) */
.flexItem {
  flex: 1;
}

/* flex: auto — полная форма: flex: 1 1 auto */
/* Растёт на оставшееся место, сжимается, но минимум по содержимому */
.item {
  flex: auto;
}

/* flex: none — полная форма: flex: 0 0 auto */
/* Не растёт, не сжимается, размер по содержимому */
.fixedSize {
  flex: none;
  width: 200px;
}

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

Практический пример: адаптивный layout

<div class="container">
  <aside class="sidebar">Navigation</aside>
  <main class="content">Content</main>
  <div class="widget">Widget</div>
</div>

.container {
  display: flex;
  gap: 16px;
  height: 100vh;
}

/* Боковая панель: фиксированная 250px, не сжимается */
.sidebar {
  flex: 0 0 250px;  /* или просто width: 250px */
  overflow-y: auto;
}

/* Основной контент: занимает всё оставшееся место */
.content {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Виджет: фиксированный 300px, не сжимается */
.widget {
  flex: 0 0 300px;
  overflow-y: auto;
}

/* На мобилке: вертикальный стак */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .sidebar,
  .widget {
    flex: 0 0 auto;  /* По содержимому */
    width: 100%;
  }
}

Наиболее частые значения

Итог

Flex — это сокращение для трёх свойств элемента контейнера с display: flex:

flex: <flex-grow> <flex-shrink> <flex-basis>
flex: 1 1 0%;  /* полная форма */
flex: 1;       /* сокращение, расшифровывается в 1 1 0% */

Это одно из самых мощных свойств CSS для создания гибких, адаптивных layout'ов без вычислений процентов и использования float.