Все статьи | Блог студента

Min и Max Width/Height в CSS

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Min и Max Width/Height в CSS  главное изображение

В процессе верстки у меня немалое количество раз возникали проблемы с размерами элементов, поэтому я всегда старался находить лучшие варианты решения каких-либо распространенных проблем.

В данной статье я бы хотел рассмотреть некоторые типовые решения часто возникающих вопросов.


1) Для кнопок (или "кнопкаподобных" дивов) стоит задавать padding и min-width

Это позволит не быть кнопке слишком маленькой в случае короткого текста, а в случае длинного текста он не будет прилипать к краям

enter image description here


2) Для блоков с текстом стоит предпочесть min-height и padding

Таким образом мы избежим переполнения блока, текст не будет выезжать за края. Очень частая ошибка новичков - использовать просто height

enter image description here


3) Для "табов" обязательно нужно указать min-width и max-width

Но в таком случае остается нерешенным один очень важный вопрос: что делать со слишком длинным текстом? Для решения данной проблемы прекрасно подойдут 3 свойства ниже:

overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

enter image description here

Наглядный пример: https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16


4) Минимальная ширина флекс-элемента по умолчанию равняется ширине контента

Этот пункт отчасти относится к посту, который я собирался делать следующим – он будет о том, как правильно работать со слишком длинным и коротким текстом.

Но этот лайфхак как по мне не кажется очевидным, к данной теме он тоже относится, к тому же он выручал меня уже дважды за последние 2 недели (!)

Ситуация состоит в следующем: однажды вы захотите реализовать обрезку текста из пункта 3, но вдруг заметите, что у вас ничего не получается: текст вылезает за края. В основном эта проблема связана с тем, что контейнер вашего текста является флекс-элементом:

enter image description here

Все дело вот в чем: по умолчанию флекс-контейнер не может стать меньше длины своего контента: то есть по умолчанию min-width: ширина контента. Для корректной работы вам нужно указать min-width: 0:

enter image description here

Наглядный пример: https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57


5) Минимальная высота флекс-элемента по умолчанию равняется высоте контента

Пункт, аналогичный пункту 4, только хочу так же привести его с хорошим примером: если указать блоку-контейнеру фиксированную высоту и написать блоку с текстом overflow-y: scroll, height: 100%, то это ни к чему не приведет

Здесь так же нужно воспользоваться min-height: 0:

enter image description here

Наглядный пример: https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100


Возможно, некоторые вещи показались вам очевидными, но в недавнем времени у меня была большая каша в голове и благодаря этим примерам я смог лучше разобраться и структурировать алгоритм верстки подобных элементов.

Теперь верстать у меня получается гораздо лучше)

Надеюсь, что эти советы покажутся вам полезными! :)

Аватар пользователя Александр Ковалец
Александр Ковалец 03 февраля 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
8 декабря 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
8 декабря 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
8 декабря 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
8 декабря 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
8 декабря 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
8 декабря 5 месяцев