Некоторые интересные особенности в макете новой эры

Интересный синтаксис CSS в последней версии Chrome CanaryContainer Queriesполучил поддержку.

Chrome Canary: Ежедневные сборки для разработчиков, стоящих в авангарде сетевых технологий. Конечно, не обязательно стабильно

В последних версиях Chrome одно за другим поддерживались некоторые интересные свойства. В этой статье будут представлены некоторые интересные новые функции, которые мы можем постепенно использовать в современном макете новой эры. Из этой статьи вы сможете понять:

в гибкой версткеgapАтрибуты
Управление свойствами соотношения сторон контейнераaspect-ratio
Макет водопада CSS Grid под Firefox (grid-template-rows: masonry)
Запросы контейнера CSS

в гибкой верстке`gap`Атрибуты

gapНе новое свойство, оно всегда существовало в макетах с несколькими столбцами.multi-columnс сеткой, где:

column-gapСвойства используются для установки макетов с несколькими столбцами.multi-columnРазмер зазора между столбцами элементов в
в сеткеgapСвойство используется для установки зазора между строками сетки и столбцами, это свойствоrow-gapа такжеcolumn-gapкраткая форма , и первоначально называласьgrid-gap

Например, у нас есть следующееgridмакет:

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

.grid-container {
    display: grid;
    border: 5px solid;
    padding: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
.item {
    width: 100px;
    height: 100px;
    background: deeppink;
    border: 2px solid #333;
}

Эффект следующий:

grid 布局

Даваяgrid-containerДобавить кgapproperties очень удобно задавать зазор между строками сетки и столбцами:

.grid-container {
    display: grid;
    border: 5px solid;
    padding: 20px;
    grid-template-columns: 1fr 1fr 1fr;
+   gap: 5px;
}

и изChromium 84чтобы начать, мы можем начать сflexиспользуется в макетеgapАтрибут!Can i use -- gap property for Flexbox

Can i use -- gap property for Flexbox

Его роль аналогична роли в макете сетки, и он может контролировать расстояние между гибкими элементами в горизонтальном и вертикальном направлениях:

.flex-container {
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    border: 2px solid #333;
}

.item {
    width: 80px;
    height: 100px;
    background: deeppink;
}

gapПреимущество атрибутов в том, что они избегают традиционного использованияmarginКогда вам нужно учитывать раздражение левого или правого поля первого или последнего элемента. Обычно 4 уровняflex item, они должны иметь только 3 пробела.gapработает только на двухflex itemмежду.

Управление свойствами соотношения сторон контейнера`aspect-ratio`

Поддержание постоянного соотношения сторон (называемого соотношением сторон) для контейнеров элементов имеет решающее значение для адаптивного веб-дизайна и некоторых макетов. Теперь, с Chromium 88 и Firefox 87, у нас есть более прямой способ управлять соотношением сторон элементов —aspect-ratio.Can i use -- aspect-ratio

Can i use -- aspect-ratio

Во-первых, нам нужно только установить ширину элемента или высоту элемента, а затем передатьaspect-ratioАтрибут, то есть можно управлять общей шириной и высотой элемента:

<div class="width"></div>
<div class="height"></div>

div {
    background: deeppink;
    aspect-ratio: 1/1;
}
.width {
    width: 100px;
}
.height {
    height: 100px;
}

Вы можете получить следующий график:

Во-вторых, установитьaspect-ratioэлемент, один из элементов высоты и ширины изменяется, а другой будет следовать за изменением:

<div class="container">
    <div>宽高比1:1</div>
    <div>宽高比2:1</div>
    <div>宽高比3:1</div>
</div>

.container {
    display: flex;
    width: 30vw;
    padding: 20px;
    gap: 20px;
}
.container > div {
    flex-grow: 1;
    background: deeppink;
}
.container > div:nth-child(1) {
    aspect-ratio: 1/1;
}
.container > div:nth-child(2) {
    aspect-ratio: 2/1;
}
.container > div:nth-child(3) {
    aspect-ratio: 3/1;
}

При изменении размера контейнера ширина каждого дочернего элемента становится шире, а высота элемента также следует заданнойaspect-ratioМасштаб следует за изменением:

CodePen Demo -- aspect-ratio Demo

Макет водопада CSS Grid под Firefox (grid-template-rows: masonry)

grid-template-rows: masonryЭто способ быстро создать макет водопада на основе макета сетки, который Firefox начал поддерживать в Firefox 87. И Firefox продвигает это свойство в стандарт.

Начиная с Firefox 87, введите в адресной строке браузераabout:configи включиlayout.css.grid-template-masonry-value.enabledНастроить для использования.Can i use -- grid-template-rows: masonry

Как правило, нам все равно нужно приложить определенные усилия для создания каскадной схемы потока, даже если она основана на сетке. Раньше мы использовали сетку для управления каждымgrid item, вы также можете реализовать несколько псевдоводопадных макетов:

<div class="g-container">
  <div class="g-item">1</div>
  <div class="g-item">2</div>
  <div class="g-item">3</div>
  <div class="g-item">4</div>
  <div class="g-item">5</div>
  <div class="g-item">6</div>
  <div class="g-item">7</div>
  <div class="g-item">8</div>
</div>


.g-container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.g-item {
    &:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    &:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / 4;
    }
    &:nth-child(3) {
        grid-column: 3;
        grid-row: 1 / 5;
    }
    &:nth-child(4) {
        grid-column: 4;
        grid-row: 1 / 6;
    }
    &:nth-child(5) {
        grid-column: 1;
        grid-row: 3 / 9;
    }
    &:nth-child(6) {
        grid-column: 2;
        grid-row: 4 / 9;
    }
    &:nth-child(7) {
        grid-column: 3;
        grid-row: 5 / 9;
    }
    &:nth-child(8) {
        grid-column: 4;
        grid-row: 6 / 9;
    }
}

Эффект следующий:

CSS Grid 实现伪瀑布流布局

Демонстрация CodePen — CSS Grid реализует макет псевдоводопада

В приведенной выше демонстрации используйтеgrid-template-columns,grid-template-rowsЧтобы разделить строки и столбцы, используйтеgrid-rowконтролировать каждыйgrid itemОднако стоимость этого слишком высока.Если элементов слишком много, объем вычислений также очень велик, и все еще предполагается, что мы заранее знаем высоту и ширину каждого элемента.

И имеяgrid-template-rows: masonryДальше все гораздо проще, для сетки с 4 колонками неопределенной высоты каждого элемента:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Обычно вы увидите что-то вроде этого:

Просто добавьте в контейнерgrid-template-rows: masonryВ вертикальном направлении используйте макет потока водопада:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: masonry;
}

Вы можете легко получить каскадный макет:

Если вы используете Firefox и он включенlayout.css.grid-template-masonry-value.enabledКонфигурация, вы можете ткнуть в следующее DEMO, чтобы почувствовать это:

CodePen Demo -- grid-template-rows: кладка реализует каскадную компоновку

Конечно, это самый простой DEMO, подробнее оgrid-template-rows: masonryДля получения соответствующих знаний вы можете подробно прочитать эту статью:Native CSS Masonry Layout In CSS Grid

Запросы контейнера CSS

чтоЗапрос контейнера CSS(Контейнерные запросы)?

Раньше для одного и того же стиля, если мы хотели получить разные эффекты в зависимости от размера области просмотра, мы обычно использовализапросы средств массовой информации.

Однако дизайн некоторых контейнеров или компонентов не всегда может быть связан с размером области просмотра, а скорее с размещением компонента в макете.

Так что в будущем будет добавлен новый способ управления стилем контейнера в разных состояниях, то есть запрос контейнера. в последнемChrome Canary, мы можем пройтиchrome://flags/#enable-container-queriesВключить функцию контейнерных запросов.

Предположим, у нас есть следующая структура:

<div class="wrap">
    <div class="g-container">
        <div class="child">Title</div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
    </div>
</div>

Обычный стиль выглядит следующим образом:

.g-container {
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid #ddd;

    .child {
        flex-shrink: 0;
        width: 200px;
        height: 100px;
        background: deeppink;
    }
    
    p {
        height: 100px;
        font-size: 16px;
    }
}

Структура выглядит следующим образом:

В будущем мы можем@container queryсинтаксис, установить родительский контейнер.wrapРазная производительность при разной ширине, на основе приведенного выше кода добавьте следующий код:

.wrap {
    contain: layout inline-size;
    resize: horizontal;
    overflow: auto;
}
.g-container {
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid #ddd;
    .child {
        flex-shrink: 0;
        width: 200px;
        height: 100px;
        background: deeppink;
    }
    p {
        height: 100px;
        font-size: 16px;
    }
}
// 当 .wrap 宽度小于等于 400px 时下述代码生效 
@container (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .g-container .child {
        width: 100%;
    }
}

Обратите внимание, чтобы включить@container query, который необходимо сопоставить с контейнеромcontainсвойства, задайте здесьcontain: layout inline-size,когда.wrapширина меньше или равна400pxчас,@container (max-width: 400px) Затем код внутри вступает в силу с горизонтальной компоновки.flex-wrap: nowrapПреобразовано в вертикальную компоновку упаковкиflex-wrap: wrap:

Если ваш браузер уже открытchrome://flags/#enable-container-queries, вы можете ткнуть этот код, чтобы почувствовать это:

CodePen Demo -- CSS @container query Demo

Сходства и различия между медиа-запросами и контейнерными запросами можно увидеть на простой диаграмме.При изменении ширины контейнера ширина области просмотра не обязательно изменяется.:

Вот только введение@container queryВерхушка айсберга, вы можете нажать здесь, чтобы узнать больше:say-hello-to-css-container-queries

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мою общедоступную учетную запись iCSS -- *Интересные факты о внешнем интерфейсе iCSS

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

в гибкой версткеgapАтрибуты

Управление свойствами соотношения сторон контейнераaspect-ratio

Макет водопада CSS Grid под Firefox (grid-template-rows: masonry)

Запросы контейнера CSS

наконец

в гибкой верстке`gap`Атрибуты

Управление свойствами соотношения сторон контейнера`aspect-ratio`