Как построить структуру сайта с помощью свойства flex

Технические моменты создания сайтов и других Web-приложений.

Как построить структуру сайта с помощью свойства flex

Сообщение andrey_web » 07 июн 2021, 18:52

Добрый вечер всем.

Подскажите, кто с таким сталкивался.
У меня сайт сделан ещё 10 лет назад в простом html и стили SCC. Сайт трех колоночный и основной контенет во 2 колонке. Основная схема построения - это с помощь тегов
<table>
<tr>
<td>Реклама</td>
<td>Контент</td>
<td>Реклама Ads</td>
</tr>
</table>
Основная таблица - отзывчивая
width: 100%
Остальные внутренние таблицы - столбцы фиксированой ширины со стилями SCC.
В общем, сайт открывался везде хорошо, до того времени, как Гугл решил ранжировать сайты по адаптации к мобильным устройствам. Конечно, посещаемость резко упала. Долго не обращал внимания, просто старался ставить на сайт уникальный и нужный контент, думая что это посещаемость увеличит. Не спамил, не ставил ненужных рекламных ссылок и домену уже 10 лет. Но...
Видно, пришло время всё-таки код сайта и страниц переписать, переделать под адаптив.

Нашел в интернет инфу, уроки, что лучше всего сайт сделать в
<div></div>
С помощью свойства SCC
"flex" - колонки. И проще для адаптива, восприятия сайта Гуглом - на 2 колонки.
Например, код верхней части
<div class="page">
<div class="kolonki">
<div class="kolonki__top">

<div class="top__content1">
<div class="top__text1">
Текст, банеры, анонсы
</div>
</div>

<div class="top__content2">
<div class="top__text2">
Текст, контент
</div>
<div class="top__logo">
<img src="img/top/logotip.jpg" alt="" />
</div>
</div>

</div>
</div>

Прописать стили для основных контейнеров и для колонок. Например,
.kolonki {
background: url("../img/top/bg_verh.jpg");
width: 1200px;
height: 1080px;
padding: 10px;
}

.kolonki__top {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
margin: 10px 15px;
}

.top__content1 {
overflow: hidden;
flex: 1 1 auto;
padding: 10px;
}

.top__content2 {
overflow: hidden;
flex: 1 1 auto;
padding: 10px;
}

Понятно, что отдельно задать стили для top__text1 и top__text2, а также для top__logo.
При адаптивности прописать @media запросы по уменьшению ширины блоков, при этом применить свойство
flex-direction: column;

Но вот сам принцип (скелет) правильно?
Внутри top__content2 разбивать контент, где присутствует фото с помощью свойства float ?
Или опять разбить этот блок на две колонки с помощью flex ?
Кто как делал, что посоветуете?

И второе — в индексе Гугла более 700 страниц.
Какие переделать? За прошедшие 2 года?
andrey_web
 
Сообщений: 1
Зарегистрирован: 07 июн 2021, 14:25

Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2