Как ограничить высоту flex-элемента в CSS: решение проблемы

Быстрый ответ

Если вы не хотите, чтобы flex-элемент растягивался в высоту, просто присвойте его свойству align-self значение auto. Вот как это выглядит в коде:

.flex-item {
  align-self: auto; /* Оставляем размеры без изменений */
}

А вот как это правило применяется в контексте HTML:

<div style="display: flex;">
  <div class="flex-item" style="align-self: auto;">Привет! Я не растянусь в высоту!</div>
</div>

В итоге, .flex-item сохранит те размеры, что определяются его содержимым, и не будет заполнять всю высоту контейнера.

Управление выравниванием: преимущество над растяжением

Когда работаете с flexbox, важно использовать свойства align-items и align-self для вертикального выравнивания элементов:

Понимаем align-items

Свойство align-items задается для flex-контейнера и определяет расположение дочерних элементов (flex-элементов) по поперечной оси:

• align-items: flex-start: Выравнивание элементов к верхнему краю.
• align-items: flex-end: Выравнивание элементов к нижнему краю.
• align-items: center: Центрирование элементов по вертикали.

Подробнее об этом расскажет наш спикер на видео

Индивидуальность align-self

Свойство align-self позволяет каждому flex-элементу индивидуально изменить выравнивание, заданное свойством align-items, контейнера:

• align-self: flex-start: Выравнивание к верхнему краю.
• align-self: center: Центральное выравнивание.
• align-self: flex-end: Выравнивание к нижнему краю.

Аналогия с выравниванием текста

Представьте себе flex-элементы как слова в тексте:

Текст: [ "Смотрите",
         "вот",   
         "моё",    
         "предложение"]

Слово "вот" можно выровнять у верхнего края так:

.vot {
  align-self: flex-start;
}

После этого изменения в тексте:

Текст: [ "Смотрите",  
     "вот" — Я на вершине! 
         "моё",    
         "предложение"]

Продолжение темы: управление переносом

Свойство align-content очень полезно в многострочных flex-контейнерах, особенно когда речь идет о распределении свободного пространства.

Особенности flex-wrap

Свойство flex-wrap: wrap позволяет разместить элементы в несколько строк. В этом случае, свойство align-content становится ключевым:

• align-content: flex-start: Выравнивание строк к верхнему краю.
• align-content: flex-end: Выравнивание строк к нижнему краю.
• align-content: center: Центральное расположение строк.
• align-content: space-around: Равномерное распределение между строками с добавлением пространства вокруг.
• align-content: space-between: Распределение строк с зазором между ними.
• align-content: space-evenly: Равное расстояние между строками.

Внимание к деталям

Следует помнить, что align-self: stretch — это значение по умолчанию, которое может заставить элемент растянуться по вертикали. Чтобы этого избежать, используйте auto, flex-start или другое значение, которое отменяет растяжение.

Визуализация

Представьте себе книги на полке:

Полка с книгами: [📕, 📘, 📗]

Нет необходимости растягивать маленькую книгу до размеров больших:

.short-book {
  align-self: flex-start; /* Быть коротким — это нормально */
}

После применения этого правила:

Полка с книгами: [📕, 📘]
     __    __
    |  |  |  |
    |  |  |__|
   📗 |__|

Маленькая книга больше не пытается быть как все!

Полезные материалы

1. Полное руководство по Flexbox на CSS-Tricks — неоценимый ресурс для тех, кто только начинает работать с Flexbox.
2. Основные концепции flexbox — MDN — замечательная статья от Mozilla, освещающая принципы работы Flexbox.
3. html – Почему flex-элементы не сжимаются до размеров своего содержимого? – Дебаты на Stack Overflow — обсуждение на Stack Overflow о поведении flex-элементов.
4. CSS Flexbox (Flexible Box) на W3Schools — практический курс с множеством примеров для быстрого освоения.
5. Наглядное руководство по свойствам CSS3 Flexbox от DigitalOcean — краткое знакомство с главными понятиями с помощью наглядных иллюстраций.
6. Понятное введение в Flexbox для новичков от SitePoint — курс по Flexbox, объясняющий концепции простыми словами.
7. Выравнивание элементов в flex-контейнере от MDN — углубленное изучение выравнивания элементов в Flexbox — отличный способ борьбы с хаосом в верстке.