收藏!40 个 CSS 布局技巧
共 17013字,需浏览 35分钟
· 2020-10-05
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/1c50b23777061d9080b9fd5c2cf126ce/774f5e7d3360a44b249d6b954641efbc.webp)
<div class="flex__container">
<svg> svg>
div>
/* CSS */
.flex__container {
display: inline-flex;
align-items: center;
justify-content: center;
}
![](https://filescdn.proginn.com/95d629d7a765985a3c036eca8bfc8cda/d2dcb0a134c31c9762349b3df9f3ee51.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/377220f06638fca73f7563db77074e28/73c97ba164da0c29a4f86a98a955bfc0.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/eb9bead2b33942b4b951112c9dcccf1e/5448001399d0a116bfc3e63801f78b2e.webp)
.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}
.flex__container > * {
align-self: center;
}
![](https://filescdn.proginn.com/675e970291cd90e800f10b32b431e1a7/d6f3ef487c01f8b7b4a38277830c66d4.webp)
.flex__container {
display: flex;
place-content: center;
}
.flex__item {
align-self: center;
}
![](https://filescdn.proginn.com/84ea69cc9b120e9eb33e8099ef20d11a/2574b156c7e8f9b7a299607c3dca5b1f.webp)
.flex__container {
display: flex;
place-content: center;
place-items: center;
}
![](https://filescdn.proginn.com/1c342ef9049166149317ea7baedc5094/f7b339553312b455f0b87639d3ed12bc.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/4950184c1ce2491ecc4a56a0b929dc81/f5a9f4256b86dc188dc2d48ceb88ab8e.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/71c391e6e27226f0c7c577fad176beef/67d8772497e95c7cc516fc7bde19f4fa.webp)
<div class="grid__container">
<div class="grid__item">div>
div>
/* CSS */
.grid {
display: grid; // 或 inline-grid
place-items: center
}
![](https://filescdn.proginn.com/d66e700d7ba5c3ce691b500929c9842a/b3b646205bba74017a18157c8e319071.webp)
![](https://filescdn.proginn.com/4721228f108e37bfa78f4d1c6757acb5/fa8db3e9032e022d524b8d9323d34a17.webp)
![](https://filescdn.proginn.com/84b77bf217f4812f8920adf9721edddb/4e18c08eaaa6994f35a205e861520198.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/22b7928de0735ed5f6354c738cee7c10/aab6fd0f95b9aab62546648aa062ac86.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/fadb03e259b8e7bdf7588c77a08b893c/3f6f7c706847d76d7a425dcd587c5ea7.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/6159127a92e3944dab596f22e4eb9066/680c08c55782ad479fad05afeb4027ef.webp)
![](https://filescdn.proginn.com/1dbac3e36593a03a22041ebb7961feb5/8e020115ab540865c53942279fbba523.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/18028a583f0d2bb4934e5c346b797a5c/f1b7d08fe17724edc8135de1d76ae72e.webp)
![](https://filescdn.proginn.com/8d137cbccd8d44a6d1815f828904def8/0ed0713720df5e4ff35d1d30000b5bec.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/9a32b3086e5bcca56f614aa1286fded6/f76cfe6ac98e090b09a50837f1a934af.webp)
![](https://filescdn.proginn.com/13eb1b3dc167098c7f36d18e88811776/863671a3905f7a7931556cffca63cafa.webp)
<header>header>
<main>main>
<footer>footer>
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
![](https://filescdn.proginn.com/dfc0ec439577ff49f9c875b54d2d9482/0a2c02380de9deff368f5e100ada2762.webp)
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
![](https://filescdn.proginn.com/fbe4c6ad7f67ccc0f5ad4e51dd81a5d3/ad7f0db8324b642ddf5cfb782c723ce5.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/40d00f1d2e070f82c3582b7139a7d7b6/99db6b569e0fa6c4ec32ab1b1e7a584b.webp)
![](https://filescdn.proginn.com/40ccecac1d5f4c44ae672409cbcea342/e41b2781c8e2b2a1b211b974929618fb.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/c771ccdba84d3c034ba69c69dc491d97/78204f298e263a77f0921f4ef3ef6164.webp)
![](https://filescdn.proginn.com/c5cdcb46f261ba1a5acbdf0e8765eec3/114ddcdf5e559c2d8a347bb2a9300fe9.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/525215417161737f94657f20165c6b61/2c69d62ac2d8fcc981d6e954ece5affd.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/6510f94667cf99b7fefc014b8b085691/6d643c876a2bb85aaf8fe3578f6e2449.webp)
![](https://filescdn.proginn.com/f7f6ffcd784b8dc131f32d79faf3a0ac/d0b64ad313e01073fff719139136eec6.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/54ea70ddc45971ecfcb85a4eccc8b403/f880a5045a0272c745aba1ab2b40d8da.webp)
.flex__item {
flex: 0 0 400px;
}
![](https://filescdn.proginn.com/fc2b2f1483a1a9262837df3d31f80820/123555a17964a9fc72bad8261f5ea165.webp)
.flex__item {
flex: 1 0 400px;
}
![](https://filescdn.proginn.com/bb9eec389b46a6551aedf80fbaf99a81/d87a570f7f3d76ddb69432949b35288a.webp)
.grid__container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2vh;
}
![](https://filescdn.proginn.com/e161f2111cbfd0107a2b8af68fa84acd/654c75c62690df0623a64b88ffaab6ac.webp)
![](https://filescdn.proginn.com/5b58d67f8a642782d8fbf05c70773108/c42f7d56fa6f94ea2655b8cdc4dd487e.webp)
![](https://filescdn.proginn.com/27a536df5150cfdf90ab4748496eb1a3/731d16a9e2c174b19258e094b228136f.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/b19d1bb6ea2794116ecfd5ec40812573/c962142c1aad2db02f53518dd5547946.webp)
nav {
order: 0;
}
aside {
order: -1;
}
![](https://filescdn.proginn.com/d6a86b2f102de2b9f38cfbe806e3d06b/f79dd361673c88b5293bfd452524d733.webp)
注意,order的默认值为0,值越大越排在后面!
@media screen and (max-width: 800px) {
main {
flex-direction: column;
}
nav, aside {
width: 100%;
}
}
![](https://filescdn.proginn.com/db16d804c7a87d9f36a7d5dc83031dc0/413427cb278ea47122d6a32056c38711.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/c65c87cd5d36d0838ee96da9de199869/302716768cf3f6183d142f37fa6cf853.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/3a5c4c458705fffa1e8133b89638d33c/757155893ee66613d3c9e2d500f773ae.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/51e6e9699263ee74653d2363e91d7649/a15a8ee6c1aaea42ed91c0a561cc5dce.webp)
![](https://filescdn.proginn.com/1be9ddeb646f115de137dbff741a70f4/65341da98865389b2745ef90a61f1c2a.webp)
![](https://filescdn.proginn.com/7eec0e1a67d2e26a07090c0f7aecbbfd/200666570c46a077446d931cf00c4637.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/3a13b0677bcc5e7a820c4962b914f220/b5f97d180c2b46cee9b16ca471c4fd5d.webp)
![](https://filescdn.proginn.com/f42756f3c88547e7f84bd4fd1e02a1ad/9bd98cf6913a50cd2223eed96a0cafb9.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/636a5e2e3f6e406533a41cba6eb5a013/264fc65e7fa73bcb477a222bb9d77668.webp)
![](https://filescdn.proginn.com/f83d26d0915bf04cc0726226d3f61f63/f06056aa605dccf0dacfa86174c674fb.webp)
![](https://filescdn.proginn.com/0c8d3a4617a45804a816785c7d698c77/3ec5d46d7c2a319fb278cfac2583471a.webp)
![](https://filescdn.proginn.com/32b6cfcff873fd7ca2a99b35ddab1ca1/89dfd5e5a8dfe331e012d2bdd79153de.webp)
![](https://filescdn.proginn.com/946cb1eb0cbacf21afdf67fd1f281504/903ab09f8d73e1ccdda2604a3496a40b.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/8ac4c28724f6ffdbcac29eb28e040b81/d26b8ca7f448134ccaedd9aa83903a0a.webp)
![](https://filescdn.proginn.com/2b31b3da5c4fe7a75f0a5d9b0ea80c72/ff6ba038e4efcc0fad7ddbbfd4e22399.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/638a271e744875e8543a73d3fed44a39/3935f8f66231b7ccbc49a826c90f51b6.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/ee3218bb91894521625ff4b02d449beb/0a4b1282bda10ff90c27c207c7c7f1bd.webp)
![](https://filescdn.proginn.com/8a826fbefe98a391b261c8f8672cbac5/b532574cbd15623f449de5647b47e837.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/e60376f1cf16c6ad4df7d3896a0e1dc3/e8020cee262d17739ebfa8d65782247e.webp)
.flex__container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
![](https://filescdn.proginn.com/64a5f26b50d590c99e364c9c399799e2/887c107e37f9893c161354fcf88ad867.webp)
![](https://filescdn.proginn.com/e3a5de154e7d73a42b71aa5882c9227f/014ffbe1c3b2d72fa9e70946f6c53b85.webp)
.flex__container::after {
content: "";
display: flex;
flex: 0 1 32vw;
}
![](https://filescdn.proginn.com/7bdc0a67051e7d19278c8b7a09ca1b50/337d0dddd02178b638a32e9c50f3028c.webp)
![](https://filescdn.proginn.com/069698541c6993a80a01e5c4db613ccd/48a6ef86cf5c9fb2c58da2c325a8bded.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/b3df391c1e2a62ee38c0a6868b4ddb70/700705a010dedf1c89fa32fa31006da5.webp)
![](https://filescdn.proginn.com/9c4d9a1b271606cab62749497394a5f7/fb5c6aa672c2c5865bbf140f2148ea87.webp)
body {
padding: 1vh;
}
.grid__container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1vh;
}
![](https://filescdn.proginn.com/e8d90b696b4c4ba90667f695e3a395fd/0bdd37e8549b7ccfa2e19370dfb1f7c8.webp)
![](https://filescdn.proginn.com/dece0e9f1fc15fc26ac54fb4a5af7514/a5c6fedd3326e213d4e3ee3656e79d49.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/9dd79e25ab1c73ce2f96d659baf7eda2/eb5c13c496d2a70d18c3b58c97508eb7.webp)
![](https://filescdn.proginn.com/03f787a3d254582ba461c4307043fbdb/5b412d8f90a4dcaff1bd076d5efa7333.webp)
![](https://filescdn.proginn.com/34b021ffab8093d30651c86645db1407/87d82d24327c3c46b6deeee6487ebb69.webp)
元素 .element 的宽度不会小于 100px(有点类似于元素设置了 min-width: 100px)。
元素 .element 的宽度不会大于 500px(有点类似于元素设置了 max-width: 500px)。
首选值 VAL 为 50vw,只有当视窗的宽度大于 200px 且小于 1000px 时才会有效,即元素 .element 的宽度为 50vw(有点类似于元素设置了 width:50vw)。
![](https://filescdn.proginn.com/fe0381e682a8a372d3093aa556820c27/77d4b360d66c38a2a207dd90a06dfdc4.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/30723adcfb47f816a66524ee5c608d38/0ef9649889ddd271ddb15d6f37e375ce.webp)
![](https://filescdn.proginn.com/da3545858a5bdbcc48d3aa3051d30952/cb4fd6b01379e4f31d5a1ac067173d1a.webp)
分享前端好文,点亮 在看