Мобильная-адаптивная верстка на флексах

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

Само слово “флексибэл” - переводится с английского как: “отзывчивый, гибкий, податливый”.

Как запихать целый сайт в мобильный телефон:

И, На главный контейнер открывающий верстку на флексах цсс: display:flex; justify-content: center; align-items:center; max-width:100%; Таким образов в этом контейнере на флексах вложенный блок будет располагаться по центру. Выравнивания по вертикали в первый основной контейнер записать min-height:100vh; // Обратите внимание % в данном случае не сработают, поэтому vh.

Семантические теги

Главный тег в котором будет происходить центрирование запишем main{display:flex; align-items:center: justify-content:center; max-width:100%; } вместо < div class=”main”>site< /div> будет просто коротко и понятно < main>site< /main> Преимущество семантических тегов - это простота и понятность. + удачный выбор, для сео оптимизации потому что поисковики ранжируют семантические теги по точному сопоставлению: “что там такое”. И хороший способ верстать сео оптимизированные страницы - это использовать современный подход.

Пример взятый из этой страницы:

main{ /* мейн - основной тег */
display:flex;
justify-content:center;/* выравнивет по горизонтали */
max-width:100%; /* растягивает на всю ширину */
background:rgba(0,0,255,0.3);
min-height:100vh;
}
article{ /* тег артикл определяется как статья */
display:flex;
justify-content:space-between; /* Горизонтальное расположение будет по центру. flex-direction:column; -отображает с верху в низ тем самым меняется */
max-width:100%;
width:900px;
align-items:center;
background:rgba(255,0,0,0.3);
min-height:100vh;
flex-direction:column;
}

Amir (ChikChicly SpaceHands Forsmazhorovich)