收藏!40 个 CSS 布局技巧
共 17012字,需浏览 35分钟
· 2020-09-21
CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大。CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中,现代CSS特性就可以更好的帮助我们快速实现如等高布局,水平垂直居中,经典的圣杯布局、宽高比例、页脚保持在底部等效果。淘系前端技术专家大漠将详细介绍一些不同的CSS属性来实现这些效果,希望对同学们有所帮助。
来源公众号:阿里技术
<div class="flex__container">
<div class="flex__item">div>
div>
/* CSS */
.flex__container {
display: flex;
justify-content: center;
align-items: center;
}
![](https://filescdn.proginn.com/b3cee1fc4e2aba4d96cd881f94803973/e311c5d8419b3d6c5f75d4885450030a.webp)
<div class="flex__container">
<svg> svg>
div>
/* CSS */
.flex__container {
display: inline-flex;
align-items: center;
justify-content: center;
}
![](https://filescdn.proginn.com/7336b1ebb615c415a190bdb0e216f7b3/3713628569b5ff4399ceb5cb3f0ddcab.webp)
<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;
}
![](https://filescdn.proginn.com/931f79f6dab3759942c0547c7b001faf/272a2f87a680644bb2e7cb0e903721d5.webp)
<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;
}
![](https://filescdn.proginn.com/c4f1ccbc67f54ee5e47847ebae706935/6e882ad568bdcc5d78fc905e4a3cb4f1.webp)
.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}
.flex__container > * {
align-self: center;
}
![](https://filescdn.proginn.com/f394087c91bbaa4f3480d298c7a6e97a/ee56d71d10a60e3ff65668e19b9f4475.webp)
.flex__container {
display: flex;
place-content: center;
}
.flex__item {
align-self: center;
}
![](https://filescdn.proginn.com/bcb606c51dac6f15b1078b7060b74202/994451ddbb42ebf26b90fc1d381e739a.webp)
.flex__container {
display: flex;
place-content: center;
place-items: center;
}
![](https://filescdn.proginn.com/4b01eaa535b8be72b6c00bac5e8152df/df87cfdc4186739cd1b129e971ec50d0.webp)
.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;
}
![](https://filescdn.proginn.com/04752c277e45f25b96b1c460a0a63cf9/aa70ebef95e20361fbe3587ec94ee89d.webp)
.flex__container {
place-content: center;
place-items: center;
}
.flex__container {
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
}
{
display: flex;
center; :
center; :
}
多行
{
display: flex;
column; :
center; :
center; :
}
.flex__container {
display: flex; // 或 inline-flex
}
.flex__item {
margin: auto;
}
![](https://filescdn.proginn.com/b0d0e9aac957a5c81d69dc66f2b5c5ab/8bbf2c5d5a96f54f66c4696360820e7f.webp)
<div class="grid__container">
<div class="grid__item">div>
div>
/* CSS */
.grid {
display: grid; // 或 inline-grid
place-items: center
}
![](https://filescdn.proginn.com/ecd979fdd5ecf6c70ba9417ec95b267f/571e791e78a92a0093481fb4fdff0ad4.webp)
![](https://filescdn.proginn.com/7d32915406c9552e671b4521f89264ad/a2b8ae944d4f30dbcb845a420f128017.webp)
![](https://filescdn.proginn.com/b6094c30e6a3f22c705026c4648c4d7e/0c21d5a8e2c5f48bd46e74c0e3f20a1d.webp)
<div class="grid__container">
<div class="avatar">:)div>
<div class="media__heading">div>
<div class="media__content">div>
<div class="action">div>
div>
![](https://filescdn.proginn.com/eabe227ee043369696cc0f5c93b99897/b1ce62fe3ad5e66a3123c9ff84cefef2.webp)
<div class="grid__container">
<div class="grid__item">
<h3>Special title treatmenth3>
<p>With supporting text below as a natural lead-in to additional content.p>
<div class="action">Go somewherediv>
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;
}
![](https://filescdn.proginn.com/91386281f562746fb21358c606468551/bf57476174e2cc8084128834cd587ee7.webp)
<flex__container>
<flex__item>flex__item>
<flex__item>flex__item>
<flex__item>flex__item>
flex__container>
/* CSS */
.flex__container {
display: flex; // 或 inline-flex
}
![](https://filescdn.proginn.com/5eae83fe2ac0ea7aac79a7c855ebaabe/87975e5ee409896b638827c0b669c80a.webp)
![](https://filescdn.proginn.com/893ad13a7b79e5ecc704693ec97f4318/6cbc458b35429cf2c02097614d4da772.webp)
<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; /* 根据需求调整值*/
}
![](https://filescdn.proginn.com/5cbe6acc5b85e6212a773e65c15062a2/cd0bba48b7dbbc0dd563f7e4a9e16abc.webp)
![](https://filescdn.proginn.com/4591526b0df9f7045856a3fa783295c1/2f3457211aa9d05ec4fa4be4feb8a946.webp)
<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%;
}
![](https://filescdn.proginn.com/bd987ddfce7cb05d09fc00ee5be4babc/d97ef30b6ae11bb36eb4a5110de54a78.webp)
![](https://filescdn.proginn.com/c8e700b8df83f022624186b61b5737fc/89f250335838f4d01bd598686f0a9da8.webp)
<header>header>
<main>main>
<footer>footer>
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
![](https://filescdn.proginn.com/bde6ef2509d0b6e6449edb55416133c0/f6ee2b7e330c3ec01a45d2af0a631c3a.webp)
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
![](https://filescdn.proginn.com/9ed4f624cea10562d8d3d79d02ad35c5/d1a1a51a97fe4ed40a39015491b3d104.webp)
main {
flex-grow: 1; /*容器有剩余空间时,main区域会扩展*/
flex-shrink: 0; /*容器有不足空间时,main区域不会收缩*/
flex-basis: auto; /*main区域高度的基准值为main内容自动高度*/
}
.grid__container {
display: grid;
grid-template-rows: auto 1fr auto;
}
![](https://filescdn.proginn.com/699190da1c4634a461c9c36186d20200/44919e878d18eb8e9a19b4881ba9d24c.webp)
![](https://filescdn.proginn.com/49598b089cd60eb1156c0a0f6fcb0311/16334d3b95e984f472dd8ecefaf9c460.webp)
<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);
}
![](https://filescdn.proginn.com/f2b0dee8ca8fd2242a9324e82ffbec80/1aa4ff28297c96c722850e32f2f2592d.webp)
![](https://filescdn.proginn.com/29ced71c7ee9053fbeec49a943663789/a5c0c36075f960d28c245d8c1d775822.webp)
<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;
}
![](https://filescdn.proginn.com/a02e81828b3847491cc67f1a295513bf/b12de1a064fdba46f6189dadfb5b1881.webp)
<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表示具体的列数*/
}
![](https://filescdn.proginn.com/bbd1012bf346a4704b9f7693d7222914/013d6d22a5089c3680a3aa827048ec26.webp)
![](https://filescdn.proginn.com/91bbc85adb8142b0bbeeabe1bbe68a1d/1c87448c5ff28b48a0e12b7be40f8d0e.webp)
.flex__container {
min-inline-size: 300px;
}
.flex__container {
display: flex;
flex-wrap: wrap;
}
.flex__item {
flex: 0 1 calc((100vw - 18vh) / 4); /* calc(100vw -18vh) / 4 是flex-basis的基准值 */
}
![](https://filescdn.proginn.com/9328d8aeef8042e3e085e4145c5f9d7d/ce2d43e36994575f2336a884b436eb0d.webp)
.flex__item {
flex: 0 0 400px;
}
![](https://filescdn.proginn.com/c13f847ab1de68063df34d20fa491a9b/e81c73c276bda12b57f5a2d2d62a6868.webp)
.flex__item {
flex: 1 0 400px;
}
![](https://filescdn.proginn.com/a6e2ba84740a77b220f34655428a4292/8bacd692fc54aa44cfaf2c43264ddee7.webp)
.grid__container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2vh;
}
![](https://filescdn.proginn.com/697bec5433fbb74587ea673a345d9a85/e02fe53528603247c4621137acfb39ce.webp)
![](https://filescdn.proginn.com/b08c5c37d0936d8a8dda261c0b2ff027/cfa82602493f9f37042cc7a8080fe82b.webp)
![](https://filescdn.proginn.com/975da434776a08928ec62d19bca2ca20/d278a1cf6d97d9e95480459ee22afa2e.webp)
<header>header>
<main>
<article>article>
<nav>nav>
<aside>aside>
main>
<footer>footer>
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;
}
![](https://filescdn.proginn.com/cfa9f73d95cc259186e143ad682d6e65/80180587a7f472ca22050034c449b748.webp)
nav {
order: 0;
}
aside {
order: -1;
}
![](https://filescdn.proginn.com/d22277d4939944368428f1213561e260/0cd5740bfaef17cdc333f762206229a4.webp)
注意,order的默认值为0,值越大越排在后面!
@media screen and (max-width: 800px) {
main {
flex-direction: column;
}
nav, aside {
width: 100%;
}
}
![](https://filescdn.proginn.com/304e36b78a7e291bb5c6aa26b9164904/388ee7f822a6605c236d89067477bb2b.webp)
<body>
<header>header>
<main>main>
<nav>nav>
<aside>aside>
<footer>footer>
body>
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;
}
![](https://filescdn.proginn.com/ddf118b3a63b8e28d83969385afad96a/cf43366a5f53924bd76fec99704cd2a9.webp)
@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;
}
}
![](https://filescdn.proginn.com/5a5553e7703ce1cc1f042086eee38dac/c40fa1a71a19c5927e791046a1ba7968.webp)
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";
}
}
![](https://filescdn.proginn.com/3586a6a49bfbc16a1f699177f1fe8470/23ad2a6fbbcd80d90e19e79ac41b930a.webp)
![](https://filescdn.proginn.com/81c5f4dc2f54d5067ea62b00711dceb7/8e169de8afb5401c579d8893c2237c3b.webp)
![](https://filescdn.proginn.com/bbdb96f51d13a96cecddd735c72c7f8c/040c074b9e4fa2cf6fb411fa58f81450.webp)
body {
display: grid;
grid-template-areas:
"header header header header header"
"nav main main main aside"
"footer footer footer footer footer";
}
![](https://filescdn.proginn.com/cf9f7c7d5465fed0009cad72c7d9a142/a9e89f7698a044704801be5ef6adb021.webp)
![](https://filescdn.proginn.com/8fbaf133606774c7e79adafaecc5b9e8/219ab740c5cbe463dbd2a52f776712c7.webp)
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;
}
}
![](https://filescdn.proginn.com/163d905217112ddbdda1d978135047f4/e81a0a8a4bb01060ea8c99ac8a59a5da.webp)
![](https://filescdn.proginn.com/2bcf812fd4f42da7de09ba60e6ccf0aa/5367f6a639e9dfb99386df47a9774f33.webp)
![](https://filescdn.proginn.com/4d3a62cd265dbb89ddb5f54461e951dd/9a691d4f3ceec264ea00aa0dfaf9f65f.webp)
![](https://filescdn.proginn.com/b0ff53452b3d30940104a90f7c627d55/2339a3409eb2dd27773f9a413bf968f7.webp)
<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>
![](https://filescdn.proginn.com/db994ea19946a6944f29908cbacc4ca2/23fe709dca43d85feb2db8f93c188208.webp)
![](https://filescdn.proginn.com/9824bb1a6f43118bf514c56ff323aae2/2d361dfeb5b9ca53f754eee5c0d93eed.webp)
: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;
}
![](https://filescdn.proginn.com/865711ce2ff61f62642c0a1f068780a0/aa2fe2d873cd8b9c82ee7d2eb4e2d0b3.webp)
<grid__container>
<grid__item>grid__item>
grid__container>
使用 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;
}
![](https://filescdn.proginn.com/8262293f815b21748be8300158e7a9b5/18af80cb1f6a11e21d5ac97a7e4fde8f.webp)
![](https://filescdn.proginn.com/0f7ba4d0651d0e1467b09fc6253ea607/3257b641e3e44986f80ebe2d11ef5889.webp)
.grid__container {
padding: 1em;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
gap: 1em;
grid-auto-flow: dense;
}
![](https://filescdn.proginn.com/3f003a38342314e16d9374742baa3ca3/12010be0574a9a7d412682b982a754a6.webp)
.flex__container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
![](https://filescdn.proginn.com/3a86d72884ef3b97a11005f4544dad98/fb4460640f16cdc0a6aed16d9f03891d.webp)
![](https://filescdn.proginn.com/4a557686341dd5757b5255697aa9e779/6d1e0d25648a456898a35d5d2aa2af49.webp)
.flex__container::after {
content: "";
display: flex;
flex: 0 1 32vw;
}
![](https://filescdn.proginn.com/a847de19cc965b1428f4e28aa2d99e67/563fce6bcb06e093f9900d42efa82fd6.webp)
![](https://filescdn.proginn.com/6fd88a4eba0caa521675b83b25ea3c9b/f57cff87b4d4763e6b6fc8031e3b2ff6.webp)
占位符元素数量 = 每行最大的列数 - 2
body {
padding: 1vh;
}
.flex__container {
display: flex;
flex-wrap: wrap;
gap: 2vh;
width: 100%;
}
.flex__item {
flex: 0 1 calc((100vw - 8vh) / 4);
}
![](https://filescdn.proginn.com/7f157524cc191811bbf7188c1f9c8600/a3c1c250cce5ce8c34cd6862353cd5df.webp)
![](https://filescdn.proginn.com/abe6fe0302b5b5ff7671defc3f92f0a9/8a238447018118102272e3abfdef9598.webp)
body {
padding: 1vh;
}
.grid__container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1vh;
}
![](https://filescdn.proginn.com/cf2b6a182cb495d678d008d0b67c19e7/35bf9cdfa8fc29f6c59e056fb3be3efd.webp)
![](https://filescdn.proginn.com/4f73837ce8deead9209a517d7e6ff788/f3ebfa7248cc13ab0501667631f5ea1f.webp)
如果 VAL 在 MIN 和 MAX 之间,则使用 VAL 作为函数的返回值。
如果 VAL 大于 MAX,则使用 MAX 作为函数的返回值。
如果 VAL 小于 MIN,则使用 MIN 作为函数的返回值。
.element {
/**
* MIN = 100px
* VAL = 50vw ➜ 根据视窗的宽度计算
* MAX = 500px
**/
width: clamp(100px, 50vw, 500px);
}
![](https://filescdn.proginn.com/63f15349d0e6c9c24fcf87630db0cae8/a94d1b87726419e5d5eab3530c864257.webp)
![](https://filescdn.proginn.com/346dd220f9d77ef1dad0bcc97bf5379f/e4919f96f0fe4c220031fe7020eb95e3.webp)
![](https://filescdn.proginn.com/f2d34da1166c3edf993e4db24b075dcc/5c37333169be275e68db3ee6b12b996c.webp)
元素 .element 的宽度不会小于 100px(有点类似于元素设置了 min-width: 100px)。
元素 .element 的宽度不会大于 500px(有点类似于元素设置了 max-width: 500px)。
首选值 VAL 为 50vw,只有当视窗的宽度大于 200px 且小于 1000px 时才会有效,即元素 .element 的宽度为 50vw(有点类似于元素设置了 width:50vw)。
![](https://filescdn.proginn.com/a91e7f6004822f6e6431d001e0348c43/f56b21a5f0d1d72a4dfa7bceb25e6b4b.webp)
<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;
}
.brands__item img {
width: 130px;
height: 75px;
object-fit: contain;
mix-blend-mode: multiply;
}
![](https://filescdn.proginn.com/03814cde5132c5b15b14fbf613d84cbb/b484f910f473fa727cb329fb7dab8247.webp)
![](https://filescdn.proginn.com/2bfb829e2e6c75edd7f3ab34fb61629a/d140166542e8066f7791af2892eb0dfd.webp)