Верстка таблицы (SCSS + flexbox)
Иногда на макетах встречаются сложные блоки, когда не совсем понятно, как их верстать. Сегодня мы сверстаем один из таких блоков — «Преимущества». Присмотревшись внимательно, вы заметите, что текст лежит в ячейках. Сквозь дизайн явно проступает табличная структура, только хорошо замаскированная.
Верстальщики очень не любят делать верстку таблиц, из-за сложностей получить адаптивность. Однако в нашем случае все не так страшно, поскольку в этой таблице мало контента и нам не нужно будет её перестраивать.
HTML структура
Визуально секция делится на две части: таблица (слева) и отдельный блок (справа). Обе части являются flex-элементами и находятся в общем flex-контейнере advantage.
.advantage <
display: flex;
justify-content: space-between;
>
В свою очередь флексовый контейнер находится внутри внешнего контейнера container и секции section.
В секции задаются внутренние отступы.
.section <
padding: 100px 0;
>
Внешний контейнер ограничивает всю конcтрукцию по ширине и выравнивает по центру страницы.
.container <
max-width: 960px;
margin: 0 auto;
>
Верстка таблицы (HTML код)
Верстка таблицы (SCSS код)
.advantage <
display: flex;
justify-content: space-between;
Верстка адаптивной таблицы
Теперь на ширине экран меньшей, чем 992 пикселя, главная ось поменяет своё направление на вертикальное. В результате таблица и блок с пользователями перестроятся на колонки. Сама таблица будет сжиматься по мере уменьшения ширины экрана.
@media only screen and (max-width: 992px) <
.container <
max-width: 720px;
>
.advantage <
flex-direction: column; // главная ось поменяла направление
align-items: center;
>
.advantage-table <
margin-bottom: 60px;
>
.advantage-users <
height: 290px;
align-self: center;
>
>
@media only screen and (max-width: 576px) <
.advantage-table <
font-size: 10px;
margin-bottom: 40px;
>
>
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Как сделать таблицу с помощью flex
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 71aad620fe9e698f • Your IP : 82.102.23.104 • Performance & security by Cloudflare
Как сделать таблицу с помощью flex
Где изначально расположение ячеек на узких экранах будет см отрется спасительно, но совершенно в другой форме, а точнее вертикальной, хотя по умолчанию на широком мониторе мы наблюдаем горизонтальное положение.
Это универсальный материал, что отлично подойдет для любого объема текста.
При открытие на большом размере монитора:
Здесь уже наблюдаем с мобильного гаджет:
Обратите внимание, что заголовок таблицы дублируется, это происходит в каждой ячейки в теге span. Все сделано для того, чтоб все отлично отображалось на узких экранах.