Как достигается такая же адаптивность?

Question

[maxemga]

Верстаю я страницу Твитера для практики, но не понимаю одного, как достигается такая же адаптивность? (Именно главный экран, когда ты не зарегестрировался еще), тоесть 2 блока слева и справа, и при уменьшении ширины страницы, эти блоки плавно и красиво меняют свою ширину, первый сильно уменьшается, правый остается примерно такой же и плюс при достижении определенной ширины, пропорционально уменьшается логотип (ну как на главной странице твитера имею ввиду). Просто если делать первому блоку max-width: 30%, то получается четко заданная ширина, и он не так красиво, плавно, пропорционально меняется
Как этого достичь?

Comments

[UberPool]

то о чем вы говорите media?

[maxemga]

UberPool, ну да, media в css, с помощью этого и делается же весь адаптив

[UberPool]

maxemga, ну так и пишите,вы так абстрактно описываете...

[Виталий Першин]

Родитель флекс, блок с контентом min-width: 45vw;, блок с логотипом занимает все остальное свободное пространство, картинка логотипа просто max-width: 100%;

[maxemga]

VicTHOR, ну не знаю, вроде нормально и красиво, большего и не надо

[Ankhena]

Держите, гридами https://jsfiddle.net/ns2cw79y/

Или флексами.

Как достигается такая же адаптивность?

Открываете инспектор кода и смотрите как сделано. Потом думаете как это можно упростить :)

Answer 1

[Roman Serdyuk]

Это делается с помощью свойств flex-basis, flex-shrink и flex-grow. Рекомендую к прочтению вот эту статью про флексы.

Comments

[Gias]

А логотип по ширине привязан... Да и просто можно в процентном соотношении задавать. А так по флексам моё любимое здесь https://habr.com/ru/post/467049/