Mom, I Can’t Learn Anymore («Мама, я больше не могу учиться!») — серия статей о последних текущих событиях программирования в компьютерной сфере (предпочтительно фронтенд-сфере), в этой серии , поле будет обсуждаться с разных сторон практика и прогресс.
предисловие
Обновлено 12.07.2020 и подтверждено электронной почтой Уны Кравец. Недавно она также опубликовала новый блог о макете видео на web.dev. Если вам интересно, вы можете пойти и посмотреть его.one line layouts
Посмотрев в воскресенье дома трехдневный прямой эфир 2020 года, я нашла много интересного, одно из которых посвящено CSS, а ведущей является Уна Кравец (член команды chrome). Хотя я не изучал CSS углубленно в течение нескольких месяцев, старая основа все еще существует (если вам интересно, вы можете прочитать статью о CSS, которую я опубликовал год назад, хотя никто не хочет ее читать, потому что она слишком низкая). уровень, грусть) .
Примечание. Большая часть приведенного ниже кода была реализована основными популярными браузерами, не используйте его в рабочей среде.
Примечание. Весь код в этой статье принадлежит Уне Кравец. Если сеть лучше, то можете посмотреть сайт, специально написанный для web.dev Уной Кравец, на котором есть все демки -1linelayouts
текст
01. Супер по центру
До flex и grid вертикальное центрирование было не очень элегантным. И теперь мы можем объединитьgridиplace-itemsэлегантно реализовано в то же времягоризонтально по центруиЦентрировать по вертикали.
<div class="parent blue" >
<div class="box coral" contenteditable>
:)
</div>
.ex1 .parent {
display: grid;
place-items: center;
}
MDN, детали атрибута place-items
02. Деконструированный блин
flex: 0 1 <baseWidth>
Этот макет часто можно увидеть на сайтах электронной коммерции:
- Когда области просмотра достаточно, три блока размещаются горизонтально с фиксированной шириной.
- Когда области просмотра не хватает (например, на мобильном устройстве), ширина по-прежнему фиксирована, но автоматически деконструируется (простите мой китайский уровень), а не на том же уровне.
<div class="parent white">
<div class="box green">1</div>
<div class="box green">2</div>
<div class="box green">3</div>
</div>
.ex2 .parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ex2 .box {
flex: 1 1 150px; /* flex-grow: 1 ，表示自动延展到最大宽度 */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}
flex: 1 1 150px;когда:
03. Классическая боковая панель
grid-template-columns: minmax(<min>, <max>) ...
использовать то же самоеgridмакет, который можно комбинироватьminmax()Реализуйте гибкую боковую панель (полезно, если вы пытаетесь уместиться на большом экране).minmax(<min>, <max>)В прямом смысле. комбинировать<flex>Единицы, очень элегантные, избегают негибких средств математического расчета ширины (например, когда мы устанавливаем зазор).
<div class="parent">
<div class="section yellow" contenteditable>
Min: 150px / Max: 25%
</div>
<div class="section purple" contenteditable>
This element takes the second grid position (1fr), meaning
it takes up the rest of the remaining space.
</div>
</div>
.ex3 .parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Исправлен верхний и нижний колонтитулы
grid-template-rows: auto 1fr auto
Верхний и нижний колонтитулы фиксированной высоты, оставшееся пространство занимает тело — часто используемые макеты, мы можем использоватьgridиfrАгрегат реализован отлично.
<div class="parent">
<header class="blue section" contenteditable>Header</header>
<main class="coral section" contenteditable>Main</main>
<footer class="purple section" contenteditable>Footer Content</footer>
</div>
.ex4 .parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
05. Классический макет Святого Грааля
grid-template: auto 1fr auto / auto 1fr auto
Мы можем легко использовать макет Grid для создания макета Holy Grail, и он гибкий.
<div class="parent">
<header class="pink section">Header</header>
<div class="left-side blue section" contenteditable>Left Sidebar</div>
<main class="section coral" contenteditable> Main Content</main>
<div class="right-side yellow section" contenteditable>Right Sidebar</div>
<footer class="green section">Footer</footer>
</div>
.ex5 .parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
.ex5 header {
padding: 2rem;
grid-column: 1 / 4;
}
.ex5 .left-side {
grid-column: 1 / 2;
}
.ex5 main {
grid-column: 2 / 3;
}
.ex5 .right-side {
grid-column: 3 / 4;
}
.ex5 footer {
grid-column: 1 / 4;
}
06. Интересные блоки для укладки
использоватьgrid-template-columnsиgrid-columnСхема, показанная на рисунке ниже, может быть достигнута. дальнейшее объяснениеrepeatиfrудобство.
07. Трюки с оперативной памятью
grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
Уна Кравец называет это трюком повтор, авто, минимакс. Это в гибкой версткекартина/коробкаЭтот класс очень полезен (количество карт, которые можно разместить в ряду, адаптируется автоматически).
.ex7 .parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
<div class="parent white">
<div class="box pink">1</div>
<div class="box purple">2</div>
<div class="box blue">3</div>
<div class="box green">4</div>
</div>
Эффект заключается в том, что если минимальная ширина нескольких блоков может быть соблюдена (например, выше150px), автоматическая эластичная подгонка по нескольким линиям.
Например:
- Текущая ширина
160px(независимо от зазора), то указанные выше четыреboxШирина подстраивается под160px, и делится на 4 строки - Текущая ширина
310px(независимо от промежутка), вышеуказанные четыреboxразделить на две строки, дваboxширина пополам - Когда 3 ящика размещены в ряду, третий ящик автоматически переместится в первый ряд.
- Когда 4 ящика размещены в ряду, четвертый ящик автоматически переместится в первый ряд.
если мы будемauto-fitизменить наauto-fill:
08. Карточная эластичная адаптация
justify-content: space-between, в сочетании сgridиflexДобейтесь идеального макета карты.
<div class="parent white">
<div class="card yellow">
<h3>Title - Card 1</h3>
<p contenteditable>Medium length description with a few more words here.</p>
<div class="visual pink"></div>
</div>
<div class="card yellow">
<h3>Title - Card 2</h3>
<p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<div class="visual blue"></div>
</div>
<div class="card yellow">
<h3>Title - Card 3</h3>
<p contenteditable>Short Description.</p>
<div class="visual green"></div>
</div>
</div>
.ex8 .parent {
height: auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.ex8 .visual {
height: 100px;
width: 100%;
}
.ex8 .card {
display: flex;
flex-direction: column;
padding: 1rem;
justify-content: space-between;
}
.ex8 h3 {
margin: 0
}
Независимо от того, сжимается ли он или расширяется по ширине или высоте, он может идеально отображать макет карты.
09. Используйте зажим для плавной типографики
clamp(<min>, <actual>, <max>)
использовать последнююclamp()Методы могут реализовать плавную типографику в одну строку. Улучшите UX, отлично подходит для карточек с контентом для чтения, так как нам не нужна слишком короткая или слишком длинная строка.
<div class="parent white">
<div class="card purple">
<h1>Title Here</h1>
<div class="visual yellow"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
</div>
.ex9 .parent {
display: grid;
place-items: center;
}
.ex9 .card {
width: clamp(23ch, 50%, 46ch);
display: flex;
flex-direction: column;
padding: 1rem;
}
.ex9 .visual {
height: 125px;
width: 100%;
}
10. Идеальные пропорции
aspect-ratio: <width> / <height>
При представлении CMS или другого дизайнерского контента мы ожидаем, что изображения, видео и карточки будут располагаться в фиксированном соотношении. И последнийaspect-ratioЭта функция может быть реализована элегантно (используя хром 84+)
<div class="parent white">
<div class="card blue">
<h1>Video Title</h1>
<div class="visual green"></div>
<p>Descriptive Text. This demo works in Chromium 84+.</p>
</div>
</div>
.ex10 .parent {
display: grid;
place-items: center;
}
.ex10 .visual {
aspect-ratio: 16 / 9;
}
.ex10 .card {
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
}
Я BY, интересный человек, в будущем будет больше оригинальных статей.
Эта статья следует лицензии MIT, пожалуйста, свяжитесь с автором для перепечатки.
Если вы заинтересованы, вы можете подписаться на официальный аккаунт (принцип Baixue) или репозиторий Star GitHub.