1. Введение
Flex похож на функциональную клавиатуру и сенсорный экран по сравнению с Grid. По сравнению с функциональной клавиатурой, возможности управления сенсорным экраном подобны удару по уменьшению размерности, потому что функциональной клавиатурой можно управлять только вверх, вниз, влево и вправо (оси x, y), а сенсорный экран преодолевает барьер компоновки. и касается непосредственно от (оси z), так чтоНезависимо от того, насколько сложна внутренняя компоновка пользовательского интерфейса, ее можно позиционировать напрямую прикосновением.
Flex — это метод одномерной компоновки. Нам необходимо непрерывно вкладывать Div для формирования сложной структуры. После изменения макета, если исходная вложенная структура не может быть «совместимо изменена» на новую структуру, код необходимо реорганизовать. Сетка, как и сенсорный экран, может быть размещена в двух измерениях.
это интенсивное чтениеПереосмыслите макет с сеткой cssПричина в том, какие изменения вносит эта революционная технология компоновки в компоновку и даже в логическую организацию кода.
2 Обзор
Автор впервые поднял вопрос о Flex, который на самом делеblock float flexОбщие проблемы этих трех режимов компоновки:
- Структура макета описывается иерархией Div, что делает иерархию Div сложной и трудной в обслуживании при изменении структуры.
- Слабая возможность настройки. В макете Flex есть некоторые неконтролируемые интеллектуальные настройки. Например, дочерние элементы шириной 50% будут сжаты ниже 50% элементами того же уровня. Такой интеллект необходим в некоторых сценариях, но поскольку нет такого понятия, как сетка .
minmaxтаких как API, поэтому настройки недостаточно.
Например, структура на рисунке выше может выглядеть во Flex следующим образом:
<div class="card">
<div class="profile-sidebar">
<img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img" />
<ul class="social-list">
<li>
<a href="#" class="social-link"
><i class="fab fa-dribbble-square"></i
></a>
</li>
<li>
<a href="#" class="social-link"
><i class="fab fa-facebook-square"></i
></a>
</li>
<li>
<a href="#" class="social-link"
><i class="fab fa-twitter-square"></i
></a>
</li>
</ul>
</div>
<div class="profile-body">
<h2 class="profile-name">Ramsey Harper</h2>
<p class="profile-position">Graphic Designer</p>
<p class="profile-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore,
dignissimos odit accusantium repellat quidem, sit molestias dolorum
placeat quas debitis ipsum esse rerum?
</p>
</div>
</div>
Используя структуру вложенности HTML, мы делим графику на два вертикальных блока, а затем продолжаем вкладывать и делить макет внутри каждого блока — это самое классическое поведение макета.
В файле стиля нам нужно описать макет каждого слоя и поддерживать гибкую компоновку с несколькими разрешениями, включая верхний слой.cardНекоторые стили, в том числе контейнер, требуют корректировки:
.card {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
max-width: 600px;
background: #005e9b;
flex-basis: 250px;
color: white;
padding: 2em;
text-align: center;
}
.profile-info {
font-weight: 300;
opacity: 0.7;
}
.profile-sidebar {
margin-right: 2em;
text-align: center;
}
.profile-name {
letter-spacing: 1px;
font-size: 2rem;
margin: 0.75em 0 0;
line-height: 1;
}
.profile-name::after {
content: "";
display: block;
width: 2em;
height: 1px;
background: #5bcbf0;
margin: 0.5em auto 0.65em;
opacity: 0.25;
}
.profile-position {
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 3px;
margin: 0 0 2em;
line-height: 1;
color: #5bcbf0;
}
.profile-img {
max-width: 100%;
border-radius: 50%;
border: 2px solid white;
}
.social-list {
list-style: none;
justify-content: space-evenly;
display: flex;
min-width: 125px;
max-width: 175px;
margin: 0 auto;
padding: 0;
}
.social-link {
color: #5bcbf0;
opacity: 0.5;
}
.social-link:hover,
.social-link:focus {
opacity: 1;
}
.bio {
padding: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 450px) {
.bio {
text-align: left;
max-width: 350px;
}
}
.bio-title {
color: #0090d1;
font-size: 1.25rem;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
margin: 0;
}
.bio-body {
color: #555;
}
.profile {
display: flex;
align-items: flex-start;
}
@media (min-width: 450px) {
.card {
flex-direction: row;
text-align: left;
}
.profile-name::after {
margin-left: 0;
}
}
Посмотрим, как это сделает Грид! Grid имеет много API, мы сосредоточимся на них.grid-template-areasЭтот атрибут, используя его, мы можем не заботиться о HTML-структуре модуля, а напрямую описывать его тайловым образом:
<div class="card">
<img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img" />
<ul class="social-list">
<li>
<a href="#" class="social-link"><i class="fab fa-dribbble-square"></i></a>
</li>
<li>
<a href="#" class="social-link"><i class="fab fa-facebook-square"></i></a>
</li>
<li>
<a href="#" class="social-link"><i class="fab fa-twitter-square"></i></a>
</li>
</ul>
<h2 class="profile-name">Ramsey Harper</h2>
<p class="profile-position">Graphic Designer</p>
<p class="profile-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere a tempore,
dignissimos odit accusantium repellat quidem, sit molestias dolorum placeat
quas debitis ipsum esse rerum?
</p>
</div>
Как видите, структура пользовательского интерфейса может быть отделена от структуры HTML с помощью Grid.Структура HTML описывает только отношение включения, и нам нужно описать только конкретную структуру пользовательского интерфейса в файле стиля.
Файл стиля перехватывает только соответствующую часть сетки:
.card {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: column;
max-width: 600px;
background: #005e9b;
flex-basis: 250px;
color: white;
padding: 2em;
text-align: left;
display: grid;
grid-template-columns: 1fr 3fr;
grid-column-gap: 2em;
grid-template-areas:
"image name"
"image position"
"social description";
}
.profile-name {
grid-area: name;
}
.profile-position {
grid-area: position;
}
.profile-info {
grid-area: description;
}
.profile-img {
grid-area: image;
}
.social-list {
grid-area: social;
}
можно увидеть,grid-template-areasЭто еще один абстрактный синтаксис, описывающий структуру страницы с помощью интуитивно понятного текста, что упрощает его понимание и изменение.
Этот метод описания также имеет преимущества в адаптации к различным разрешениям, если реорганизацияgrid-template-areasТолько что:
@media (min-width: 600px) {
.card {
text-align: left;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"image name"
"image position"
"social description";
}
}
В конечном итоге Grid передает управление макетом дочерних элементов родительскому через двухмерное описание структуры, что делает описание макета более интуитивно понятным.
Наконец, автор также упомянул, что у Flex все еще есть сценарии использования, а именно простые одномерные структуры илиspace-betweenи т.д. Уникальный синтаксис Flex. Поэтому рекомендуется использовать Grid для габаритных и сложных двумерных макетов, а Flex — для простых одномерных макетов.
3 Интенсивное чтение
Идея макета Grid вдохновила меня: разделение структуры HTML и структуры пользовательского интерфейса помогает уменьшить иерархическую структуру DIV и сделать код более понятным.
Некоторые люди могут задаться вопросом, Grid — это не что иное, как перенос некоторых функций разметки HTML в CSS, и общая сложность должна оставаться неизменной. Фактически, изgrid-template-areasКак видно из этого API, Grid не только извлекает функцию макета в CSS, но и абстрагирует описание макета, чтобы облегчить поддержку кода.
абстрактный, абстрактный
Почему Grid может абстрагироваться от макета? Поскольку Grid держит двумерную структуру в своих руках и имеет более широкие возможности компоновки, можно дополнительно абстрагировать структурированную грамматику в строковое описание.
Преимущества абстракции очевидны, как вы думаете, куча вложенных DIV или следующий код, который более читабелен?
.card {
grid-template-areas:
"image name"
"image position"
"social description";
}
В этом преимущество абстракции: вообще говоря, чем абстрактнее код, тем легче его читать и поддерживать.
Давайте посмотрим на другой плагин Chrome Grid, который визуализирует сетку и может быть настроен в пользовательском интерфейсе:
Пользовательский интерфейс представляет собой повторную абстракцию текста, избегая при этом некоторого невозможного синтаксиса, такого как:
.card {
grid-template-areas:
"image name"
"image position"
"social image";
}
Макет может быть расширен только как выпуклый многоугольник, его нельзя разделить, а также он не может внезапно стать вогнутым многоугольником, вставив другой модуль. Следовательно, пользовательский интерфейс может избежать этой ошибки и упростить его на несколько горизонтальных и вертикальных линий, чтобы разделить пользовательский интерфейс.Очевидно, что этот метод описания более эффективен.
Надо сказать, что исследование Grid и графических плагинов — это большой прогресс в области верстки и непрерывная абстрактная попытка. описать интерфейс.
Влияние компоновки на модульность
Сетка улучшает макет на размер, что напрямую влияет на модульность JS.
Особенно, когда код организован в JSX, модуль равен UI + JS, а вложенный макет делает нас более склонными к разделению модулей с точки зрения пользовательского интерфейса.
Например, для модуля на рисунке выше, если мы используем макет Flex, мы можем сначала создать модуль X в качестве левого контейнера, дочерние элементы — A и B, создать модуль Y в качестве правого контейнера, дочерний элемент — C и новый контейнер Z, контейнер Z. Дочерними элементами являются D и E.
Если ваше первое впечатление состоит в том, чтобы организовать свой код таким образом, вы должны признать, что модульность может зависеть от того, как он организован. Хотя такое деление во многих случаях верно, когда пять модулей не связаны друг с другом, создаваемые нами контейнеры X, Y и Z теряют возможность повторного использования, и нам приходится снова их рекомбинировать в новом сценарии объединения.
Но в синтаксисе Grid нам не нужны X, Y, Z, просто используйтеcss grid generatorПеретащите, как показано выше, чтобы автоматически сгенерировать следующий код макета:
.parent {
display: grid;
grid-template-columns: 3fr repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 {
grid-area: 1 / 1 / 3 / 2;
}
.div2 {
grid-area: 3 / 1 / 6 / 2;
}
.div3 {
grid-area: 1 / 2 / 2 / 4;
}
.div4 {
grid-area: 2 / 2 / 6 / 3;
}
.div5 {
grid-area: 2 / 3 / 6 / 4;
}
фактическиgrid-template-columns grid-template-rowsкоэффициент комбинированного использованияgrid-template-areasБолее мощный, но описание пути в чистом коде не подходит.grid-template-areasИнтуитивно, но с некоторой визуальной системой очень просто:
После извлечения пяти макетов модулей от A до E взаимосвязь между ними выравнивается, и мы можем полностью изучить, как выполнить модуляризацию с логической точки зрения.
4 Резюме
CSS Grid — это, по сути, двумерный синтаксис макета, по сравнению сBlock,FlexРавная одномерная схема макета, еще одно измерение может определять макет с точки зрения строк и столбцов одновременно, поэтому он получен изgrid-template-areasСинтаксис в целом более связный и интуитивно понятный, а степень абстракции выше.
Понимание этого также позволяет понять будущее направление развития макета.Держите макет отдельно от домаФронтенд всегда был мечтой, при разработке UI части нужно заботиться только о том, из каких модулей состоит страница и реализовывать эти модули, и не нужно заботиться о том, как модули должны сочетаться. При описании комбинации структура макета может быть описана визуальными или абстрактными строками и соответствовать написанному модулю.Такая ремонтопригодность кода намного выше, чем при использовании DIV для описания структуры.
Адрес обсуждения:Интенсивное чтение «Переосмысление макета с помощью CSS Grid» · Выпуск № 211 · dt-fe/weekly
Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, выходящими по выходным или понедельникам. Интерфейс интенсивного чтения — поможет вам отфильтровать надежный контент.
Сфокусируйся наАккаунт WeChat для интенсивного чтения в интерфейсе
Заявление об авторских правах: Бесплатная перепечатка - некоммерческая - не производная - сохранить авторство (Лицензия Creative Commons 3.0)