Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 <h2>Содержание</h2>

4 <ul><li><a>Для кнопок (или "кнопкаподобных" дивов) стоит задавать padding и min-width</a></li>

5 <li><a>Для блоков с текстом стоит предпочесть min-height и padding</a></li>

6 <li><a>Для "табов" обязательно нужно указать min-width и max-width</a></li>

7 <li><a>Минимальная ширина флекс-элемента по умолчанию равняется ширине контента</a></li>

8 <li><a>Минимальная высота флекс-элемента по умолчанию равняется высоте контента</a></li>

9 </ul><h2>Для кнопок (или "кнопкаподобных" дивов) стоит задавать padding и min-width</h2>

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

11 <h2>Для блоков с текстом стоит предпочесть min-height и padding</h2>

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

13 <h2>Для "табов" обязательно нужно указать min-width и max-width</h2>

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

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

16 <h2>Минимальная ширина флекс-элемента по умолчанию равняется ширине контента</h2>

17 <p><em>Этот пункт отчасти относится к посту, который я собирался делать следующим - он будет о том, как правильно работать со слишком длинным и коротким текстом.</em></p>

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

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

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

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

22 <h2>Минимальная высота флекс-элемента по умолчанию равняется высоте контента</h2>

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

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

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

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

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

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