CSS-трюки, с которыми вы, возможно, не знакомы

CSS
CSS-трюки, с которыми вы, возможно, не знакомы

Поскольку веб-технологии продолжают развиваться, CSS в последние годы также стал более мощным, чем несколько лет назад. CSS — это неотъемлемая часть веб-разработки, и для многих веб-разработчиков существует множество свойств CSS, которые они не знают или знают, но забывают использовать наиболее подходящие свойства CSS в самое подходящее время. И по сей день существуют некоторые свойства CSS, которые позволяют разработчикам экономить еще больше времени. Например, в веб-верстке современные функции CSS могут лучше помочь нам быстро достичь таких результатов, как разметка равной высоты, центрирование по горизонтали и вертикали, классическая компоновка Holy Grail, соотношение сторон, нижний колонтитул внизу и т. д. В этой статье я расскажу о некоторых различных свойствах CSS для достижения этих эффектов, надеюсь, вам будет интересно. Я надеюсь, что это поможет вам в вашей будущей работе.

Центрируется по горизонтали и вертикали

Как добиться горизонтального и вертикального центрированияМожно сказать, что это классический вопрос для собеседования по CSS.Многие годы назад этот вопрос для интервью вызвал недоумение у многих студентов, ноМодуль макета Flexbxoа такжеМодуль компоновки CSS GridМожно сказать, что добиться горизонтального и вертикального центрирования очень легко.

Горизонтальное и вертикальное центрирование во Flexbox

В модуле компоновки Flexbox, будь то одна строка или несколько строк, их легко центрировать по горизонтали и вертикали в контейнере, и есть много способов сделать это. Наиболее распространенным является установка выравнивания на flex-контейнере и установка его на flex-элементе.margin:auto.

Давайте сначала рассмотрим настройку выравнивания для гибкого контейнера.

Установите выравнивание для flex-контейнеров и flex-элементов

Вы, вероятно, уже знаете, как настроить flex-контейнеры.justify-content,align-itemsценностьcenter, элемент может быть центрирован по горизонтали и вертикали в контейнере flex. Давайте посмотрим пример:

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

/* CSS */
.flex__container {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

Demo

Это особенно адаптировано для горизонтального значка. Значок, центрированный вертикально в контейнере, представляет собой другой набор значков. Значок на контейнере.display: inline-flex. Например следующий пример:

<!-- HTML -->
<div class="flex__container">
    <svg> </svg>
</div>

/* CSS */
.flex__container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

Demo

В этом режиме, если вы хотите добиться эффекта горизонтального и вертикального центрирования нескольких элементов, вам нужно добавитьflex-direction: column,Например:

<!-- HTML -->
<div class="flex__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>

/* CSS */
.flex__container  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

Demo

В макете flexbox вы также можете центрировать flex-элементы по горизонтали и вертикали в flex-контейнере следующим образом:

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

/* CSS */
.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}

.flex__item {
    align-self: center;
}

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

Demo

Этот метод также работает, если во flex-контейнере есть несколько flex-элементов:

.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}

.flex__container > * {
    align-self: center;
}

Например, этот эффект:

Demo

Кроме того, вы также можете использоватьplace-content: centerЧтобы центрировать гибкий элемент по горизонтали и вертикали:

.flex__container {
    display: flex; 
    place-content: center;
}

.flex__item {
    align-self: center;
}

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

Demo

Или заменить:

.flex__container {
    display: flex;
    place-content: center;
    place-items: center;
}

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

Demo

Оба этих метода одинаково применимы, когда во гибком контейнере есть несколько гибких элементов:

.flex__container {
    display: flex;
    flex-direction: column;
    place-content: center;
}

.flex__container > * {
    align-self: center;
}

// 或

.flex__container {
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
}

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

Demo

Многие студенты могутplace-contentа такжеplace-itemsбудет чувствовать себя незнакомым. фактическиplace-contentдаalign-contentа такжеjustify-contentсокращенное свойство ; иplace-itemsдаalign-itemsа такжеjustify-itemsСокращенное свойство . который:

.flex__container {
    place-content: center;
    place-items: center;
}

равно:

.flex__container {
    align-content: center;
    justify-content: center;

    align-items: center;
    justify-items: center;
}

Хотя он расширен до четырех свойств, в конечном итоге он эквивалентен:

.flex__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 多行
.flex__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Установить маржу: автоматически на гибких элементах

Если в контейнере flex есть только один элемент flex, вы также можете явно указать его в элементе flex.marginценностьauto, который также центрирует гибкий элемент по горизонтали и вертикали внутри гибкого контейнера. Например:

.flex__container {
    display: flex; // 或 inline-flex
}

.flex__item {
    margin: auto;
}

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

Demo

Вы можете испытать весь процесс на следующем примере. Попробуйте выбрать разные направленияmarginстоимость:

Demo

Горизонтальное и вертикальное центрирование в сетке

Макет CSS Grid, возможно, является серебряной пулей в современных веб-макетах. Кроме того, пока это единственная двумерная система компоновки в системе компоновки.

在CSS Grid布局中，只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。 Например следующий пример:

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item"></div>
</div>

/* CSS */
.grid {
    display: grid; // 或 inline-grid
    place-items: center
}

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

Demo

В модуле макета CSS Grid, если вы явно задалиdisplay: grid(илиinline-grid) создаст контейнер Grid и элементы Grid, а также автоматически сгенерирует линии сетки, т. е. строки и столбцы (по умолчанию — одна строка и один столбец).

явно не задан в контейнере Gridgrid-template-columnsа такжеgrid-template-rows, браузер по умолчанию установит для контейнера Grid размер содержимого Grid:

Этот подход также работает для контейнеров CSS Grid с несколькими дочерними элементами (элементами сетки), такими как:

<!-- HTML -->
<div class="grid__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>

В это время эффект, который вы видите, выглядит следующим образом:

Demo

а такжеpalce-itemsотносится к каждой ячейке. Это означает, что он будет центрировать содержимое ячейки. Например следующий пример:

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item">
        <h3>Special title treatment</h3>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <div class="action">Go somewhere</div>
    </div>
</div>

/* CSS */
.grid__container {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vh;
}


.grid__item {
    display: grid;
    place-items: center;
}

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

Demo

Равновысокая компоновка

Макет с равной высотой также является очень распространенным методом компоновки в Интернете, и существует множество решений для достижения макета с одинаковой высотой. Здесь мы в основном рассматриваем изменения, внесенные в модуль макета Flexbox и модуль макета Grid.

В модулях макетов Flexbox и Grid нам очень просто реализовать макеты равной высоты, такие как:

<!-- Flexbox -->
<flex__container>
    <flex__item></flex__item>
    <flex__item></flex__item>
    <flex__item></flex__item>
</flex__container>

/* CSS */
.flex__container {
    display: flex; // 或 inline-flex
}

Проще говоря, явно установленный на контейнереdisplayценностьflexилиinline-flex, все дочерние элементы контейнера имеют одинаковую высоту, посколькуalign-itemsЗначение по умолчаниюstretch.

В это время эффект, который вы видите, выглядит следующим образом:

Demo

Этот метод особенно подходит для карточных компонентов:

Demo

Аналогично в модуле макета сетки:

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
    <grid__item></grid__item>
    <grid__item></grid__item>
</grid__container>

/* CSS */
.grid__container {
    display: grid;
    grid-template-columns: 20vw 1fr 20vw; /* 根据需求调整值*/
}

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

Demo

Также используется в некоторых макетах классов карт:

Demo

Если спрос корректируется, например, вГибкий проектилиСетевой проектВысота дочерних элементов равна высоте контейнера.

<!-- HTML -->
<flex__container>
    <flex__item>
        <content></content>
    </flex__item>
</flex__container>

/* CSS */
.flex__container {
    display: flex;
}

.content {
    height: 100%
}

// 或 
.grid__container {
    display: grid;
    grid-auto-flow: column;
}

.content {
    height: 100%;
}

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

Demo

Sticky Footer

Во-первых, используйте следующий рисунок, чтобы описать, чтоSticky FooterЭффект макета:

Реализация Sticky Footer аналогична равной высоте и центрированию по вертикали.такой жеЕсть много вариантов достижения.

Например, такая структура:

<!-- HTML -->
<header></header>
<main></main>
<footer></footer>

Давайте сначала посмотрим на реализацию в модуле макета Flexbox:

body {
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

Demo

можно попробоватьmainПеретащите вниз правый нижний угол области, чтобы изменить высоту области основного содержимого, вы увидите «Когда содержимое меньше одного экрана,<footer>будет внизу страницы, когда контент превышает один экран,<footer>будет автоматически отложено».

В макете Flexbox вы также можете<main>Установите следующие стили для области, чтобы добиться такого же эффекта:

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

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

Demo

<main>серединаflex: 1 0 autoэквивалентно:

main {
    flex-grow: 1; /*容器有剩余空间时，main区域会扩展*/
    flex-shrink: 0; /*容器有不足空间时，main区域不会收缩*/
    flex-basis: auto; /*main区域高度的基准值为main内容自动高度*/
}

Если вы хотите избежать неприятностей, вы можетеmainЯвно включенflex-grow:1,потому чтоflex-shrinkа такжеflex-basisЗначение по умолчанию1а такжеauto.

В макете CSS Grid мы можем использовать1frПозволять<main>Площадь вычисляется в соответствии с оставшимся пространством контейнера Grid.

.grid__container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

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

Demo

поровну

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

До появления Flexbox и Grid, если вы хотели добиться настоящего эффекта выравнивания, вы могли использовать100%(или100vw) разделить на определенное количество столбцов. Например:

<!-- HTML -->
<container>
    <column></column>
    <column></column>
    <column></column>
</container>

/* CCSS */
.container {
    inline-size: 50vw;
    min-inline-size: 320px;
    display: flex-row;
}

.column {
    float: left;
    width: calc(100% / 3);
}

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

Demo

В отладчике браузера можно обнаружить, что все ширины текущих столбцов равны:

В макетах Flexbox и Grid добиться вышеуказанных эффектов становится намного проще. Давайте сначала посмотрим на макет во Flexbox:

<!-- HTML -->
<flex__container>
    <flex__item></flex__item>
    <flex__item></flex__item>
    <flex__item></flex__item>
</flex__container>

/* CSS */
.flex__container {
    inline-size: 50vw;
    display: flex;
}

.flex__item {
    flex: 1;
}

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

Demo

В модуле макета Flexbox, когдаflexПринимаемое значение представляет собой одно значение (безразмерное число), например, в примереflex:1, это будет рассматриваться как явная настройкаflex-grow: 1. рассчитывается браузеромflex:

Далее давайте посмотрим, как добиться эффекта приведенного выше примера в Grid:

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
    <grid__item></grid__item>
    <grid__item></grid__item>
</grid__container>

/* CSS */
.grid__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*这里的3表示具体的列数*/
}

Конечный эффект тот же:

Demo

Этот макет также применяется к другим макетам. Но будь то макет Flexbox или Grid, есть определенные дефекты.Когда в контейнере недостаточно места для размещения элементов Flex (или элементов Grid), элементы Flex или элементы Grid будут переполняться (или скрываться, если контейнер Flex или Grid контейнер явно уже настроенoverflow:hidden):

Самый простой способ исправить это — явно установитьmin-width(илиmin-inline-size):

.flex__container {
    min-inline-size: 300px;
}

Но опять же, например, наш элемент Flex (или элемент Grid) представляет собой карту, и ширина каждой карты одинакова, и мы надеемся, что когда в контейнере не будет достаточно места, элемент Flex (или элемент Grid) будет быть автоматически разбиты и организованы.

Продолжаем показывать на примерах. Давайте сначала посмотрим на реализацию Flexbox:

.flex__container {
    display: flex;
    flex-wrap: wrap;
}

.flex__item {
    flex: 0 1 calc((100vw - 18vh) / 4); /* calc(100vw -18vh) / 4 是flex-basis的基准值 */
}

Demo

Вы можете попробовать настроить ширину области просмотра браузера. По мере того, как область просмотра браузера становится все меньше и меньше, ширина контейнера flex становится все меньше и меньше. Когда контейнер flex настолько мал, что в нем недостаточно места для четырех элементов flex (для этого примера , оператор), то элемент Flex выстроится в линию:

На основе этого примера, если элемент FlexflexИзмените значение на:

.flex__item {
    flex: 0 0 400px;
}

В это время, когда во флекс-контейнере недостаточно места, флекс-элемент будет нажиматьflex-basis: 400pxРассчитайте его ширину, когда во флекс-контейнере не хватит места, флекс сломается:

И наоборот, если значение гибкого элементаflexИзмените его на:

.flex__item {
    flex: 1 0 400px;
}

Когда в контейнере flex недостаточно места для размещения flex-элементов, flex-элементыflex-basis: 400pxВычислите его ширину, Flex разорвет строку, и когда в той же строке останется место, flex-элемент расширится, чтобы заполнить весь flex-контейнер:

Добиться подобного эффекта в Grid немного сложнее. можно использоватьrepeat()функция,1frтак же какauto-fitи т.д. Особенности:

.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2vh;
}

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

Demo

Если вам интересны эти знания, вы также можете прочитать "Container Query Solutions with CSS Grid and Flexbox" статья.

На самом деле, в сетке сauto-fitЗначение сравнения также называетсяauto-fill. Но разница между ними очень велика, что показано на следующем рисунке.auto-fitа такжеauto-fillРазница:

Кроме того, этот метод пока представляет собой эффект адаптивного макета, не требующий медиа-запросов CSS.

Макет Святого Грааля

Макет Святого ГраалядаТипичные шаблоны макетов в Интернете. Следующая диаграмма выглядит так:

Для планировки Святого Грааля HTML-структура заключается в определенных требованиях, которые содержание для первого:

<!-- HTML -->
<header></header>
<main>
    <article></article> <!-- 主内容 -->
    <nav></nav>
    <aside></aside>
</main>
<footer></footer>

Здесь я в основном буду обсуждать с вами, как использовать модули макета Flexbox и Grid для реализации макета Holy Grail. Давайте сначала посмотрим на реализацию Flexbox:

body {
    width: 100vw;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-height: 0;

    display: flex;
    align-items: stretch;
    width: 100%;
}

footer {
    margin-top: auto;
}

nav {
    width: 220px;
    order: -1;
}

article {
    flex: 1;
}

aside {
    width: 220px;
}

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

Demo

вnav,asideа такжеarticleЯвно включенorderЗначение , может управлять порядком компоновки этих трех областей. например, надежда<aside>существует<article>Аранжировалось ранее, просто нужно сделать небольшую корректировку на основе вышеприведенного примера:

nav {
    order: 0;
}

aside {
    order: -1;
}

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

Уведомление,orderЗначение по умолчанию0, чем больше значение, тем выше его рейтинг!

На основе приведенного выше примера с помощью характеристик медиаобъектов CSS легко добиться эффекта отзывчивого макета святого Грааля:

@media screen and (max-width: 800px) {
    main {
        flex-direction: column;
    }
    
    nav, aside {
        width: 100%;
    }
}

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

Demo

Попробуйте перетащить браузер, чтобы изменить размер окна, вы можете увидеть эффект, как показано ниже:

В модуле макета Grid проще и гибче реализовать макет Holy Grail, чем в модуле макета Flexbox. В модуле компоновки CSS Grid структура HTML может быть более лаконичной:

<!-- HTML -->
<body>
    <header></header>
    <main></main>
    <nav></nav>
    <aside></aside>
    <footer></footer>
</body>

Есть много способов добиться эффекта макета Святого Грааля, когда дело доходит до CSS. Смотрим на первый:

body {
    display: grid;
    grid-template: auto 1fr auto / 220px 1fr 220px;
}

header {
    grid-column: 1 / 4;
}

main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

nav {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

aside {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

footer {
    grid-column: 1 / 4;
}

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

Demo

В приведенном выше примере используются линии сетки для позиционирования каждой области:

Как и в макете Flexbox, положение каждой области сетки можно изменить в медиа-запросе:

@media screen and (max-width: 800px) {
    body {
        grid-template-rows: auto;
        grid-template-columns: auto;
    }

    header,
    main,
    nav,
    aside,
    footer {
        grid-column: 1 / 2;
        min-height: auto;
    }

    main {
        grid-row: 3 / 4;
        margin: 0;
    }

    nav {
        grid-row: 2 / 3;
    }

    aside {
        grid-row: 4 / 5;
    }

    footer {
        grid-row: 5 / 6;
    }
}

Demo

Кромеgrid-template(которыйgrid-template-columnsа такжеgrid-template-rows), в макете сетки вы также можете использоватьgrid-areaа такжеgrid-template-areasКомбинация атрибутов также может легко реализовать макет CSS Holy Grail. Основываясь на приведенном выше примере, просто настройте свой CSS так:

body {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
}

header {
    grid-area: header;
}

main {
    grid-area: main;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

@media screen and (max-width: 800px) {
    body {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
    }
}

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

Demo

Вы могли заметить различия между ними:

В этом примере<nav>,<main>а также<aside>Области одинаковой ширины. Это потому, что в нашем примере мы передаемgrid-template-areasобъявить сетку при использованииgrid-template-areasПри создании сетки также неявно создаются линии сетки, но он иgrid-templateразница в томgrid-templateРазмер дорожки сетки можно указать явно, в то время какgrid-template-areasВ этом примере эквивалентный размер дорожки сетки равен1fr.

если мы хотим<main>площадь становится больше, то можноgrid-template-areasВнесите корректировку:

body {
    display: grid;
    grid-template-areas:
        "header header header header header"
        "nav main main main aside"
        "footer footer footer footer footer";
}

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

Demo

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

Хотя эффект был скорректирован, он по-прежнему сбалансирован. Лучшее решение - поставитьgrid-template-areasа такжеgrid-templateИспользовать в сочетании с:

body {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 220px 1fr 220px;
    grid-template-rows: auto 1fr auto;
}

header {
    grid-area: header;
}

main {
    grid-area: main;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

@media screen and (max-width: 800px) {
    body {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }

    main {
        margin-left: 0;
        margin-right: 0;
    }
}

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

Demo

Вы можете обнаружить, что в это время область линии сетки называется как на следующем изображении:

12-колоночная сетка

сетка из 12 столбцовМакет был впервые созданСистема компоновки сетки, предложенная 960.gs:

Макет сетки из 12 столбцов часто используется в дизайн-системах и CSS Framework, таких как классика отрасли.BootstrapИспользуется 12-колоночная сетка:

В сообществе также есть много онлайн-инструментов, которые помогут нам быстро построить систему сетки из 12 столбцов, напримерFree CSS Grid Tools & Resources For DevelopersИнструменты, перечисленные в этой статье.

Но здесь я в основном хочу взглянуть на то, как 12-колоночная система разметки сетки реализована в модулях разметки Flexbox и Grid.

Давайте сначала посмотрим на модуль макета Flexbox. HTML-структура макета сетки из 12 столбцов обычно выглядит следующим образом:

<!-- HTML -->
<flex__grid>
    <flex__row>
        <flex__item col4></flex__item col4>
        <flex__item col4></flex__item col4>
        <flex__item col4></flex__item col4>
    </flex__row>
</flex__grid>

Уведомление,В сетке из 12 столбцов сумма значений столбцов в одной строке обычно точно равна**12**. Например, в приведенной выше HTML-структуре есть три столбца в строке, и каждый столбец имеет ровно четыре ширины сетки плюс два интервала между столбцами. И есть зрелая формула расчета при расчете:

И также будут различия в дизайне, например, есть ли зазор между двумя сторонами контейнера и т. Д .:

Эти различия немного отличаются в оформлении расчетных формул и стилевых кодов. Давайте использовать один из них в качестве примера:

:root {
    --gutter: 10px;
    --columns: 12;
    --span: 1;
}

.flex__container {
    display: flex;
    flex-direction: column;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.flex__row {
    display: flex;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}

.flex__row + .flex__row {
    margin-top: 2vh;
}

.flex__item {
    flex: 1 1
        calc((100% / var(--columns) - var(--gutter)) * var(--span));
    margin: 0 var(--gutter);
}

.flex__item1 {
    --span: 1;
}

.flex__item2 {
    --span: 2;
}

.flex__item3 {
    --span: 3;
}

.flex__item4 {
    --span: 4;
}

.flex__item5 {
    --span: 5;
}

.flex__item6 {
    --span: 6;
}

.flex__item7 {
    --span: 7;
}

.flex__item8 {
    --span: 8;
}

.flex__item9 {
    --span: 9;
}

.flex__item10 {
    --span: 10;
}

.flex__item11 {
    --span: 11;
}

.flex__item12 {
    --span: 12;
}

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

Demo

В этом примере функции, связанные с пользовательскими свойствами CSS, используются для упрощения всего расчета.

Для использования модуля макета CSS Grid для реализации макета сетки из 12 столбцов, условно говоря, будет проще как структура HTML, так и код CSS. При использовании модуля макета CSS Grid для реализации макета сетки с 12 столбцами вы будете использоватьrepeat(),minmax(),gapа такжеfrи другие характеристики. Возьмем конкретный пример.

<!-- HTML -->
<grid__container>
    <grid__item></grid__item>
</grid__container>

Давайте посмотрим на код CSS:

  • использоватьfrРазделите сетку на равные значения, т.е. ширина каждого столбца равна1индивидуальныйfr;сотрудничатьrepeat()функция, то естьrepeat(12, 1fr)Создана сетка из 12 столбцов
  • использоватьgapМожет использоваться для управления расстоянием между сетками.
  • Сотрудничатьminmax()Вы также можете установить минимум сетки

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

:root {
    --columns: 12;
    --gap: 10px;
    --span: 1;
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: 1fr;
    gap: var(--gap);
    padding-left: calc(var(--gap) / 2);
    padding-right: calc(var(--gap) / 2);
}

.grid__item {
    min-block-size: 10vh;
    grid-column: span var(--span);
}

.col1 {
    --span: 1;
}

.col2 {
    --span: 2;
}

.col3 {
    --span: 3;
}

.col4 {
    --span: 4;
}

.col5 {
    --span: 5;
}

.col6 {
    --span: 6;
}

.col7 {
    --span: 7;
}

.col8 {
    --span: 8;
}

.col9 {
    --span: 9;
}

.col10 {
    --span: 10;
}

.col11 {
    --span: 11;
}

.col12 {
    --span: 12;
}

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

Demo

Для этого примераgrid-template-columns: repeat(12, 1fr)Создайте сетку, как показано ниже:

В дополнение к вышеуказанному грубому методу он также может быть более гибким,auto-fit,minmax()так же какgrid-auto-flow: denseи т. д. для создания:

.grid__container {
    padding: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 1em;
    grid-auto-flow: dense;
}

для.grid__itemв состоянии пройтиgrid-column,grid-rowдля управления положением элементов сетки:

Demo

плюсgrid-auto-flow: denseЭлементы сетки автоматически перемещаются в соответствующее место в соответствии с пространством контейнера сетки:

Этот макет очень подходит для журнальных макетов. Для более подробного ознакомления с этим прочитайте @Keir Watson's "Responsive Grid Magazine Layout in Just 20 Lines of CSS" статья.

оправданный

Необходимость обоснования часто встречается в веб-макетах. В макетах Flexbox часто явно задается во flex-контейнере.justify-contentЗначение:

.flex__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    width: 100%;
}

Но в конце строки, если количество строк не такое, как в предыдущей строке (элементы Flex), появится следующий эффект:

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

Чтобы добиться этого эффекта во Flexbox, вам нужно всего лишь добавить псевдоэлемент в контейнер Flex:

.flex__container::after {
    content: "";
    display: flex;
    flex: 0 1 32vw;
}

Обратите внимание, что псевдоэлементflex-basisРекомендуемые настройки и картыflex-basis(или ширина) эквивалентны. На этом этапе вы увидите пример, подобный следующему:

Demo

Однако этот способ не самый лучший, когда количество строк в конце больше одной, появится следующий эффект:

Столкнувшись с таким сценарием, нам нужно добавить во flex-контейнер дополнительный пустой элемент label:

Количество элементов-заполнителей = максимальное количество столбцов в строке - 2

ноgapПосле появления атрибута добиться такого эффекта несложно:

body {
    padding: 1vh;
}

.flex__container {
    display: flex;
    flex-wrap: wrap;
    gap: 2vh;

    width: 100%;
}

.flex__item {
    flex: 0 1 calc((100vw - 8vh) / 4);
}

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

Demo

Уведомление,gapПока используется во Flexbox, поддерживается только браузером Firefox.. В приведенном выше примере, используя браузер Firefox, вы можете увидеть следующий эффект:

В макете CSS Grid вы можете напрямую использоватьgap:

body {
    padding: 1vh;
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1vh;
}

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

Demo

Выберите лучшее значение

Много раз для разных сценариев дизайнеры предоставляли нам разные стили дизайна, такие как размер элемента:

вместе сclam()С появлением функций это все стало намного проще.

clam()Функция принимает три параметра, а именно**clam(MIN, VAL, MAX)**,вMINпредставляет минимальное значение,VALпредставляет предпочтительное значение,MAXпредставляет максимальное значение. между ними:

  • еслиVALсуществуетMINа такжеMAXмежду, использоватьVALкак возвращаемое значение функции;
  • еслиVALбольше, чемMAX, затем используйтеMAXкак возвращаемое значение функции;
  • еслиVALменьше, чемMIN, затем используйте MIN как возвращаемое значение функции

Давайте посмотрим на пример:

.element { 
    /** 
    * MIN = 100px 
    * VAL = 50vw ➜ 根据视窗的宽度计算 
    * MAX = 500px 
    **/ 
    
    width: clamp(100px, 50vw, 500px); 
}

Например, текущая позиция окна браузера1200pxширина, то.elementОтрендеренный результат выглядит следующим образом:

В настоящее время.elementэлементальwidthда500px. В настоящее время,clamp(100px, 50vw, 500px)эквивалентноclamp(100px, 600px, 500px),соответствующийVALзначение600px, больше, чемMAXзначение, то на этот разclamp()Значение, возвращаемое функцией, равноMAX,Прямо сейчас500px,В настоящее время.elementизwidthзначение500px(которыйMAXстоимость).

Если мы уменьшим окно браузера до760px:

В настоящее время.elementэлементальwidthда50vw. В настоящее время,clamp(100px, 50vw, 500px)эквивалентноclamp(100px, 380px, 500px),соответствующийVALзначение380px, что больше, чемMINстоимость(100px), меньше, чемMAXстоимость(500px), то на этот разclamp()Значение, возвращаемое функцией, равноVAL,Прямо сейчас50vw,В настоящее время.elementизwidthзначение50vw(которыйVALстоимость).

Если вы продолжаете сжимать окно браузера до170px:

В настоящее время.elementэлементальwidthда100px. В настоящее время,clamp(100px, 50vw, 500px)эквивалентноclamp(100px, 85px, 500px),соответствующийVALзначение85px, что меньшеMINстоимость(100px), то на этот разclamp()Значение, возвращаемое функцией, равноMIN,Прямо сейчас100px,В настоящее время.elementизwidthзначение100px(которыйMINстоимость).

Для этого примераclamp(100px, 50vw, 500px)Это можно понять и так:

  • элемент.elementширина не менее100px(несколько похоже на настройки элементаmin-width: 100px)
  • элемент.elementширина не будет больше500px(несколько похоже на настройки элементаmax-width: 500px)
  • Предпочтительное значениеVALдля50vw, только если ширина области просмотра больше, чем200pxи меньше чем1000pxдействует только тогда, когда элемент.elementширина50vw(несколько похоже на настройки элементаwidth： 50vw)

Конкретный эффект заключается в следующемНажмите здесь, чтобы просмотреть учетную запись.

Выравнивание значков логотипа

Я думаю, вы могли столкнуться со сценарием, подобным приведенному ниже, в веб-разработке:

Как показано на изображении выше, изображение логотипа может быть большим или маленьким (разной ширины и высоты). Столкнувшись с таким бизнес-сценарием, дизайнеры часто должны предоставлять изображения одинакового размера. Но это неизбежно отразится на внешнем виде логотипа.

Некоторое время назад я увидел, как @Ahmad Shadeed написал сообщение в блоге "Aligning Logo Images in CSS", чтобы представить, как добиться эффекта макета, как показано выше.

На самом деле, для достижения такого эффекта макета основным приложением является CSS.object-fitатрибут, и этот атрибут поддерживался основными популярными браузерами много лет назад.

Здесь мы используем простой пример, чтобы увидеть конкретный процесс реализации. Давайте сначала посмотрим на структуру HTML:

<!-- HTML -->
<ul class="brands">
    <li class="brands__item">
        <a href="#">
            <img src="img/logo.png" alt="">
        </a>
    </li>
    <li> <!-- ... --> </li>
</ul>

Выравнивание по центру было введено ранее, здесь в основном для просмотра обработки размера изображения:

.brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
}

.brands__item {
    background: #eee;
}

.brands__item a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

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

.brands__item img {
    width: 130px;
    height: 75px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

В это время эффект, который вы видите, выглядит следующим образом:

object-fitкроме значенияcontainКроме того, есть еще несколько значений,Подробности смотрите в этом примере:

На самом деле, эта схема также подходит для изображений товаров, аватаров персонажей и других макетов.

резюме

Статья в основном знакомит с идеями реализации и конкретными схемами некоторых макетов в сети. На самом деле эффекты, упомянутые в статье, такие какЦентрируется по горизонтали и вертикали,Равновысокая компоновка,равномерно распределенный столбеца такжеSticky FooterПодождите, в CSS всегда было несколько решений, но с появлением модуля макета CSS Flexbox и модуля макета CSS Grid достижение этих эффектов стало более гибким и лаконичным.

Конечно, в статье упоминаются только некоторые из наиболее распространенных эффектов, на самом деле в веб-верстке есть много интересного, особенно в верстке Flexbox и верстке Grid, но они не перечислены по порядку из-за недостатка места. Если вам интересно, вы можете раскопать еще кое-что.Если у вас есть лучший опыт или решения в этом отношении, пожалуйста, поделитесь в комментариях ниже. Наконец, я надеюсь, что эта статья поможет вам в вашей обычной работе.

Категории