Добрый день, коллеги. Подскажите как правильней всего задать размер флексу.

Question

Добрый день, коллеги. Подскажите как правильней всего задать размер флексу.

Я хочу сделать 2 контейнера в ряд. Первый должен занимать 80% и быть как-бы телом основного контента на странице, второй 20% и будет отображать другие новости в миниатюре. Я сделал следующим образом, есть максимальная ширина всей контентной части сайта, я высчитал от неё 20% и написам максимально возможную ширину в пикселях для второго блока, так получается что он будет адаптироваться под контент внутри но не превышать допустимый размер, а первому елементу прописал минимальную ширину 80%, таким образом блок не должен занимать меньше 80% даже если контента в нём будет не достаточно. Подскажите какие подводные камни могут вылезти при таком логике, и может есть более грамотное решение? Спасибо.

#css #frontend #html #programming #russian

0

12.11.2021

8 ответов

11 просмотров

Vladimir Gu

Если я всё правильно понял, то будет проблема с отображением на меньших экранах. Правый блок будет выходить за область отображения (это если wrap не стоит у родителя). А левая область будет менять размеры в зависимости от ширины области, то есть будет резиновой. Чем не устраивает правой области 20% задать?

0

12.11.2021

Максим Автор вопроса

Vladimir Gu
Если я всё правильно понял, то будет проблема с от...

На маленьких екранах проблемы не будет, так как изначально верстается мобильная версия, а в ней второй блок находится под первым, там всё норм. А на больших екранах должно отображаться как я описал выше, в 2 блока. Вроде удаляя весь текст и основного большого блока ничего в моей логике написания не плывёт, но может я что-то не понимаю ещё. Учусь пока.

0

12.11.2021

Vladimir Gu

Максим
На маленьких екранах проблемы не будет, так как из...

Я думаю, все мы здесь учимся... Я хотел пояснить, если задать 80% + некоторая величина в пикселях, то сумма будет составлять 100% ширины области отображения только при одном размере окна браузера (который не обязательно на весь экран будет). При другой ширине, пока не подействуют правила для мобильной вёрстки, их сумма будет либо больше, либо меньше ширины. Кстати, всё что я описал будет, если ширина родительского блока будет равна ширине окна браузера. Если ширину родителя ограничить, там другие могут быть приколы.

0

12.11.2021

Максим Автор вопроса

Vladimir Gu
Я думаю, все мы здесь учимся... Я хотел пояснить, ...

Может я что-то не понял. У меня нигде не указана строгая ширина в пикселях. Есть первый елемент, который занимает минимум 80%, и есть второй елемент, который может занимать максимум 200px. В моей голове возникает логика, если елемент 1 занимает 80% а для 2 елемента осталось меньше 200рх, то второй будет адаптироваться и сжиматься. Если же елемент 1 занимает 80% и для 2 осталось больше 200рх, то он не увеличится чрезмерно и останется в рамках своего допуска. А так как контейнер всей страницы ограничен у меня в самом начале на внешнем блоке, то даже при сверх больших экранах всё должно быть нормально. Но я могу быть не прав сейчас :)

0

12.11.2021

Vladimir Gu

Максим
Может я что-то не понял. У меня нигде не указана с...

Для больших экранов всё хорошо будет. Для экранов поменьше, если контент не даст сжаться блоку меньше 200px то вся ширина будет больше ширины экрана. Например, берем экран 900px. 80% = 720px. 720px+200px = 920px, получается больше исходной ширины. А поскольку оба блока достигли минимальной ширины (один 200px, у другого минимум 80%), они уже не помещаются.

0

12.11.2021

Максим Автор вопроса

Vladimir Gu
Для больших экранов всё хорошо будет. Для экранов ...

Я вас понял, если во втором блоке будет текст или картинка требующая ширины больше 200рх, всё поплывёт в сторону?

0

12.11.2021

Vladimir Gu

Максим
Я вас понял, если во втором блоке будет текст или ...

Ага

0

12.11.2021