В чем моя ошибка с Flex- ом?

Question

[Alex ALex]

Сверстал макет с помощью флекс и при уменьщении макета до 200%(она так и должна выглядит?) она не корректно отображается. Посмотрите и посоветуйте что тут в коде не так и где я ошибся? Жду ваших советов ЗАРАНЕЕ СПАСИБО)
Вот тут сам код. https://codepen.io/hadjibaev/pen/eYmdJzX

Answer 1

[Ankhena]

height: 100vh; //почему тут только vh работает?

а что бы вы хотели?

при уменьщении макета до 200%

Уменьшение это обычно меньше 100, а увеличение больше.

Видимо, вам нужно почитать про @media и адаптивность в принципе.

Comments

[Alex ALex]

Ну вообще то она адаптивная вы посмотрели код?

[Alex ALex]

А если задать в .center{ min-height: 100vh; } то проблема с первой картинки исчезает..

[Ankhena]

Alex ALex, ну не поместилось в экран

[Alex ALex]

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

[Ankhena]

Alex ALex, Это не уменьшение окна, это увеличение масштаба.

Фиксированная высота всегда приводит к тому, что при переполнении содержимое вываливается из блока.

Т.е. правильность зависит от задумки.

И всё таки редко увеличивают масштаб до 200%. Обычно достаточно 110-150%, иначе это значит, что с сайтом что-то совсем не то.
Лучше смотрите адаптивность на разных разрешениях, хотя бы в режиме эмуляции в инструментах разработчика.

spoiler

[Alex ALex]

Ankhena, Я же там задал мастаб 100% и 100vh это фиксированная ? и еще нормально открывается в разных устройствах я посмотрел в инструментах разработчика все вроде норм. То есть я нормально сверстал?)

[Ankhena]

Alex ALex, ну где ш это нормально?


Если суммарная высота item'ов больше 100vh, то ни вываливаются из зоны фона.

[Alex ALex]

Ankhena, Я извеняюсь это первый макет который я более менее сверстал можете ее исправить чтоб бы я мог понять где я ошибся а то я понял что я не правильно сверстал(

[Alex ALex]

Ankhena, Когда я задаю 100% вместо 100vh то вообще все не так.. И как это настроить?

[Ankhena]

Alex ALex,
либо так: https://jsfiddle.net/ta032s8w/
либо так: https://jsfiddle.net/g306udjo/

[Ankhena]

Alex ALex,

Когда я задаю 100% вместо 100vh то вообще все не так.. И как это настроить?

Попробуйте на пустой странице задать для body толстенький border. Всё поймете. В современном doctype у body нет высоты, она = 0. Значит, когда вы дочерним элементам задаете высоту 100%, то выходит снова 0.

Поэтому, если хочется считать высоту в процентах от окна, то нужно задать высоту 100% для html, потом min-height 100% для body. И только потом высоту в процентах для дочерних элементов.

[Alex ALex]

Ankhena, Ок сейчас попробую хороший совет) Да еще в первом примере который вы мне скинули там по 2 колонки а в макете она по 3 колонки

[Ankhena]

Alex ALex, потому что фиксированную ширину в px убрала и не заменила ее на %, забыв про флекс.
Пусть будет 80%. Сами поменяете на что хотите по макету.
https://jsfiddle.net/91hjqc3L/

[Ankhena]

Alex ALex, разобрались?

[Alex ALex]

Ankhena, Нет пока но спасибо большое вы мне очень помогли)

[Ankhena]

Alex ALex, пишите, если что

[Alex ALex]

Ankhena, Как тебя найти в вк моя почта [e-mail] напиши мне пожалуйта свой вк если не трудно. Если вопрос возникнет напишу там думаю быстро ты ответишь.

[Ankhena]

Alex ALex, контакты в профиле, телеграм предпочтительнее