Моя первая вёрстка на flexbox

[Maxim_1987]

Здравствуйте! Хочу попросить Вас дать оценку качеству моей верстки на flexbox. Насколько я корректно всё сделал по макету картинки как начинающий верстальщик.  Заранее спасибо Вам за Ваши комментарии!

Вот фото  учебного макета который я выбрал - https://www.google.ru/search?q=фото+блоки+html&client=opera&tbm=isch&tbs=rimg:CW0cuSjdxUARIjg1m98XjuFCKfWyXRFS7-gKPyIzURB7epn_1SAwIAsUWcubeGc-NkstE-4VS0iZTpWbHvNH2sOQiZCoSCTWb3xeO4UIpEXuduADiMYt_1KhIJ9bJdEVLv6AoRXN7sHpHNBykqEgk_1IjNREHt6mRH1o0qrZZLOfyoSCf9IDAgCxRZyETzJ0UPal_1n7KhIJ5t4Zz42Sy0QR-riDWM1jA-MqEgn7hVLSJlOlZhE8ydFD2pf5-yoSCce80faw5CJkEbHD2un0Vv-C&tbo=u&sa=X&ved=2ahUKEwi9nZSRrsTZAhWLFiwKHZ3tDbEQ9C96BAgAEBk&biw=1326&bih=658&dpr=1#imgrc=bRy5KN3FQBFI4M:

Вот ссылка на мою вёрстку - https://codepen.io/Krutov/pen/yvQNEy

Ещё раз спасибо!

 

[Switch74]

что-то не понятное
а если wrapper будет больше?..
от flex тут одно название

хорошая верстка должна автоматически подгоняться под размеры, а не вымеряться на глаз смещениями

[Maxim_1987]

Спасибо за Ваш отзыв! Вы имеете ввиду, что слишком много значений margin?

[Switch74]

я имею ввиду:
position: relative; и left, bottom, top

 

[Maxim_1987]

Я понял Вас! Спасибо Вам за замечание. кстати, правый padding у меня так и не получился у меня таким точным как на макете. Хотя задал box-sizing: border-box; Подскажите пожалуйста, почему так?

[Switch74]

padding - это отступ внутри блока
скорее всего вам нужно использовать
margin - поля снаружи блока
но вам придется рассчитывать размеры блоков с учетом margin
https://jsfiddle.net/1qo3rwzo/ - здесь родительский блок имеет box-sizing: border-box; занимает нужное нам пространство, но нужно рассчитать размеры содержимого
https://jsfiddle.net/1qo3rwzo/1/ - здесь размеры содержимого рассчитывать не нужно, но и блок на самом деле занимает не 300px
а выглядят они одинаково

[Maxim_1987]

Спасибо Вам! Дали мне более чёткое понимание в этом вопросе. Подскажите пожалуйста, а если нужно чтобы блок div в примере всё таки был ровно 300px  по ширине? Посмотрите пожалуйста, правильно ли я переделал код под такое требование? Я пожертвовал размерами span, и добавил свойства flexbox. Заранее спасибо Вам за Ваш ответ! 

Моя ссылка - https://codepen.io/Krutov/pen/PQXQYm

 

[Switch74]

Уже получше, на будущее вам наверняка понадобится создавать резиновый шаблон, его можно сделать подобным образом
https://jsfiddle.net/euegtqd8/

[Maxim_1987]

Очень круто конечно! Подскажите пожалуйста, а почему высота div получилась примерно 440px? Мы ведь высоту не задавали. И ещё вопрос, при сужении окна браузера, блок автоматически становится меньше и подстраивается, это из за того что width указан в %, и то что мы используем flex? Заранее спасибо Вам за Ваши ответ!

[Switch74]

ширина подстраивается из-за % и flex, у flex есть свои способы для задания размеров и указания расположения блоков
если нужно пропорционально изменять высоту блока относительно его ширины, то есть способ через padding-top:100%;
http://www.internet-technologies.ru/articles/procentnye-znacheniya-dlya-vertikalnyh-svoystv-v-css.html

[Maxim_1987]

Спасибо Вам!!! Многому научился у Вас!

[Maxim_1987]

Подскажите пожалуйста, может ли быть вот такая разметка, резиновой и адаптивной? (Немного переделал код, на основе полученных от Вас знаний, расположенных выше).

Моя ссылка - https://codepen.io/Krutov/pen/QQzVdp

Заранее благодарю Вас за ответ!

 

[Switch74]

Ну она у вас уже резиновая, а адптивность прописать можно любой разметке

[Maxim_1987]

Спасибо Вам!