В процессе верстки у меня немалое количество раз возникали проблемы с размерами элементов, поэтому я всегда старался находить лучшие варианты решения каких-либо распространенных проблем.
- 1) Для кнопок (или "кнопкаподобных" дивов) стоит задавать padding и min-width
- 2) Для блоков с текстом стоит предпочесть min-height и padding
- 3) Для "табов" обязательно нужно указать min-width и max-width
- 4) Минимальная ширина флекс-элемента по умолчанию равняется ширине контента
- 5) Минимальная высота флекс-элемента по умолчанию равняется высоте контента
В данной статье я бы хотел рассмотреть некоторые типовые решения часто возникающих вопросов.
1) Для кнопок (или "кнопкаподобных" дивов) стоит задавать padding и min-width
Это позволит не быть кнопке слишком маленькой в случае короткого текста, а в случае длинного текста он не будет прилипать к краям
2) Для блоков с текстом стоит предпочесть min-height и padding
Таким образом мы избежим переполнения блока, текст не будет выезжать за края. Очень частая ошибка новичков - использовать просто height
3) Для "табов" обязательно нужно указать min-width и max-width
Но в таком случае остается нерешенным один очень важный вопрос: что делать со слишком длинным текстом? Для решения данной проблемы прекрасно подойдут 3 свойства ниже:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Наглядный пример: https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
4) Минимальная ширина флекс-элемента по умолчанию равняется ширине контента
Этот пункт отчасти относится к посту, который я собирался делать следующим – он будет о том, как правильно работать со слишком длинным и коротким текстом.
Но этот лайфхак как по мне не кажется очевидным, к данной теме он тоже относится, к тому же он выручал меня уже дважды за последние 2 недели (!)
Ситуация состоит в следующем: однажды вы захотите реализовать обрезку текста из пункта 3, но вдруг заметите, что у вас ничего не получается: текст вылезает за края. В основном эта проблема связана с тем, что контейнер вашего текста является флекс-элементом:
Все дело вот в чем: по умолчанию флекс-контейнер не может стать меньше длины своего контента: то есть по умолчанию min-width: ширина контента. Для корректной работы вам нужно указать min-width: 0:
Наглядный пример: https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
5) Минимальная высота флекс-элемента по умолчанию равняется высоте контента
Пункт, аналогичный пункту 4, только хочу так же привести его с хорошим примером: если указать блоку-контейнеру фиксированную высоту и написать блоку с текстом overflow-y: scroll, height: 100%, то это ни к чему не приведет
Здесь так же нужно воспользоваться min-height: 0:
Наглядный пример: https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
Возможно, некоторые вещи показались вам очевидными, но в недавнем времени у меня была большая каша в голове и благодаря этим примерам я смог лучше разобраться и структурировать алгоритм верстки подобных элементов.
Теперь верстать у меня получается гораздо лучше)
Надеюсь, что эти советы покажутся вам полезными! :)
