收藏!40 个 CSS 布局技巧
共 17010字,需浏览 35分钟
· 2020-10-18
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/287b66e7e99f492ff866e0b2c547bfdd/5501ab713711169f3d6d5bae25450caf.webp)
<div class="flex__container">
<svg> svg>
div>
/* CSS */
.flex__container {
display: inline-flex;
align-items: center;
justify-content: center;
}
![](https://filescdn.proginn.com/65213293b5fcfe6c5df3ea7d0f173989/2aa470c4aa523176e55a3a1d4909d742.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/53e6d5bb6df114df720214d91cf30cac/a08d5f5473661bb6f35f6ea5a1eb698a.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/c37ccbed1fd33ce4f2cf575e5c8d21d2/d46525cf7937754097b41179ef810c97.webp)
.flex__container {
display: flex; // 或inline-flex
justify-content: center;
}
.flex__container > * {
align-self: center;
}
![](https://filescdn.proginn.com/d71adf69c0d15f4d91bd101514c9943a/95820add41b86a5d0ac25e1b65ec0bcb.webp)
.flex__container {
display: flex;
place-content: center;
}
.flex__item {
align-self: center;
}
![](https://filescdn.proginn.com/55ecf56748a0112b71403c80f870ffb3/983478f0e5358a811d1cb4f0eb08e420.webp)
.flex__container {
display: flex;
place-content: center;
place-items: center;
}
![](https://filescdn.proginn.com/39cf3cf2685290dd361d4c61aab0e5a6/4a1f27fb5b1866f9be1eed209923e8d1.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/10805b9e711222bbf991d3c467ee73db/365a37eb7ec2e005492817d36f1cd56b.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/c8fbd97d79b8e35c8525b967b09afabd/2f8eb76b284f08fe2d00b783de7b10de.webp)
<div class="grid__container">
<div class="grid__item">div>
div>
/* CSS */
.grid {
display: grid; // 或 inline-grid
place-items: center
}
![](https://filescdn.proginn.com/7e0070d1b590a020031c65788faa7c09/a3c782de458fffc2ad77c5266448e7e3.webp)
![](https://filescdn.proginn.com/ee37c28176b857224ecd9e01bdaae390/9a03b507f09759e8320c88c2288288e6.webp)
![](https://filescdn.proginn.com/ea5ccfcd1a656e535125b05ed8f4b6f9/4940fe5209609f0dbf647fce1d8611d0.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/7b4b6a28c4d2597dbe5ca98a9b0e4c73/f9ac7c045839618573f7a99090fdcfb3.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/752483cdd58cb47ca01e162544542fe4/9f7096a79f43b17913aa1e61f21c6e1a.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/80a4597eff47fe7f7aa5cf4b93f1a0e5/13055bac751bdc3a8c628c5e919f0de7.webp)
![](https://filescdn.proginn.com/9a2f15b9ed5bb26570c8c1295b1d34fd/8ca9ae7f76205a69bb03306ea94416d7.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/95e204caef1908bbe86c31a0cbbdc1f5/29f1ee5cc3a22d75746c6ce096567e3b.webp)
![](https://filescdn.proginn.com/e4b55d4636e990e9545b779f5ceebb1f/56bce36774e0fa7ab7800783bd8fa85a.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/32d131dd341d6e50dc9e1d83fd5ada10/7451775eebb7e860540428e0ed08f782.webp)
![](https://filescdn.proginn.com/7d1263a07f40b3fa6db001bf34373c05/5af81079d1b78b7a031dfb99ce734cc5.webp)
<header>header>
<main>main>
<footer>footer>
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
![](https://filescdn.proginn.com/f74f21060d98665bfc13db7e7b35f409/e788ff913e8dcc13ddff76f689a90b4c.webp)
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
![](https://filescdn.proginn.com/35682cc660906f41839d433c49bf3f61/7f991615926323062db67f125e39dd4b.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/5400ba1335ff1ad042111296f5af99c3/46815fe3f8b6ce361bf5f8f0caac7e89.webp)
![](https://filescdn.proginn.com/99c92a3ebd6b500bb44036596e884574/0b858fc98dce392b90a28285e7d94036.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/4305829f79feb96326978d71fe850c01/e2689b65f11dfca2c14f3a1792af38b3.webp)
![](https://filescdn.proginn.com/3e640e7ffc0faa99a0895ec3125db43f/fca46526580e74d679b15b3da03cd07b.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/ad21ca2078d51fcf577df55d2a83e4c5/96202891df74f56596f8b3efb20d4452.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/95dedf02336cf1de27634b8b3eb8b3aa/f712f3361860916a291709fa81147cd0.webp)
![](https://filescdn.proginn.com/0b7e304cf13c3db4d66bd036ad82b2ff/7ef909eb3f975b475fa246712e0c9c68.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/934f612577b7d3f9ac87b9508d5681e4/b0ef840ac01be3e75d72accb54ccb9f0.webp)
.flex__item {
flex: 0 0 400px;
}
![](https://filescdn.proginn.com/cc07f42288ceeb4f71daadefaea41303/c997934229874a971dd9d3d33419108d.webp)
.flex__item {
flex: 1 0 400px;
}
![](https://filescdn.proginn.com/1b51cd996dc9810ff1fad897af4bc949/eede1951540c75818ba52b7eb9c8fa9b.webp)
.grid__container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2vh;
}
![](https://filescdn.proginn.com/9cb689191bd98f7a221e9f9c1edeb024/4982d9ddd06028e45091881927b5c463.webp)
![](https://filescdn.proginn.com/76a83bba1fca2a087cc6c03d9c4cce94/6b076d26497a2828c7ddb4880c789bdb.webp)
![](https://filescdn.proginn.com/2a6d9b80b2174637ee6f18e41eafa2c8/a4832426053411195d0c94e47507a23d.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/b7d25b07450dc8f2a7a5cc24bc4f762f/1b2bb829f6e82e7f3f101b5fe065c968.webp)
nav {
order: 0;
}
aside {
order: -1;
}
![](https://filescdn.proginn.com/94439c430b34a1234f420b5c57d3cb7e/351867f103cd46f2d43e7b280b6a7c32.webp)
注意,order的默认值为0,值越大越排在后面!
@media screen and (max-width: 800px) {
main {
flex-direction: column;
}
nav, aside {
width: 100%;
}
}
![](https://filescdn.proginn.com/d0565603027f5dee50ce12d81296ad68/b9f48e5b7c95785a29c257832963d68b.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/c87b932b1dbd1d74ca7375dffd7cd798/db9c292f168e40bf97a616badfd781dc.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/85cfcd7d5be3dae68438792b63afee22/13a8880598e28f8943101360993598a1.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/f005297e4f058ffec971c5371a6b7cdd/81712bb8ef352ffd0ba5bba3a11503c6.webp)
![](https://filescdn.proginn.com/2ef5a753460d63c767ab3a5285dcffcd/9f17a7390c249e1ca54cd701f2ee746d.webp)
![](https://filescdn.proginn.com/52323a74a4519c7f829d91fb82e51d73/e7e801827786cec8151e295b47628dc0.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/05d41fddedd9a1307976baf997ed3e31/8d3951a2e325626e12fd09b7e8e5850f.webp)
![](https://filescdn.proginn.com/5cc97b58999a2a1697afd0ddad7308dc/6a0e3da32268c3ca3fb0cd762350bd1e.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/a4692066b20d7f55c5ffe367a81159d5/ed2aabfac614c63d71d85d27f24a1ec3.webp)
![](https://filescdn.proginn.com/b14cc238b0197655ed14424a6d22f2d1/b2b9be484f6914d77c9e580ead0e151a.webp)
![](https://filescdn.proginn.com/dc35ec2dc8160a559c7b26abf0358754/b4f2791fa86c11ea8c02d6e2417844bd.webp)
![](https://filescdn.proginn.com/d6d45a0dc416fddf94823afe28431028/8c45d9f85f21d2528265efc80eaa2b6e.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/79fcabf1bfac6ac41bcb2fc9bab40612/87a8a86572dd5efba92fe30190cc51aa.webp)
![](https://filescdn.proginn.com/5df43175406962ffa5646258251bec92/a8915e5baaecc2feeb5cb051d9417d59.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/dfb2a297875bfaa42206d7bb109c6e85/3b5855449b042e5a3a5cf6f4710f03a7.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/346ddbd04ff26df1034aefc94ab9569c/f189b023b8bde5d043be9cec83ac3320.webp)
![](https://filescdn.proginn.com/d1a0500e1413187dbec910525a819c0f/1d8c9fb8ef97d9b8a8bde7e094d892b9.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/d26d49b64e18528ec2e839a172559b17/22c0a7ce4bdda705b488f33f40680c36.webp)
.flex__container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
![](https://filescdn.proginn.com/ba627cfd86de9aa6ef978321fafed95b/b4705038824b6aefa93165914960cbb3.webp)
![](https://filescdn.proginn.com/bef0c4077d24320f9569722f5eeb3ea4/f9c2723b2d4a249ffdf8981bdfa5fe22.webp)
.flex__container::after {
content: "";
display: flex;
flex: 0 1 32vw;
}
![](https://filescdn.proginn.com/9aabca25e5158126b4685ce7222081b9/069637494854e98605d551d24f79111e.webp)
![](https://filescdn.proginn.com/e792742bab637ed97ce081aa89807b1b/558e55ad7d71e69cea5738cb3aa4bb78.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/400c96e3faa7032b27d5e22c46db2ae4/f292afa7754b0cce29f94d8d079da494.webp)
![](https://filescdn.proginn.com/30b7c05f04b31a2fd3471d233083a410/812bd1297e5636ebe51bb9e2bcb1603f.webp)
body {
padding: 1vh;
}
.grid__container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1vh;
}
![](https://filescdn.proginn.com/c9f95a4123e1b2520bd489ea6f6130ef/5339ab54fc110b9735841976c927fb30.webp)
![](https://filescdn.proginn.com/fb7e23c7e19c6b5513c44be356e37138/bc438f0724ca8447c896ff4a82b371a1.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/d5bb3dd2ef14c18c017f8b1ec302c5d4/6f7a91b97090c8eddc114fbaa9e5af85.webp)
![](https://filescdn.proginn.com/6f660093ae582fe7b62e296c5fdf8f8c/93ceb39e4475feef915958242eff2138.webp)
![](https://filescdn.proginn.com/c8d5bd71df2eb13fac3817d594ec4b5a/2f109d314e83bb001c8d378982826248.webp)
元素 .element 的宽度不会小于 100px(有点类似于元素设置了 min-width: 100px)。
元素 .element 的宽度不会大于 500px(有点类似于元素设置了 max-width: 500px)。
首选值 VAL 为 50vw,只有当视窗的宽度大于 200px 且小于 1000px 时才会有效,即元素.element 的宽度为 50vw(有点类似于元素设置了 width:50vw)。
![](https://filescdn.proginn.com/39e8979f4844d11790d3ca5865fd48c8/389550ccc3cb516dd4e57704fdff78cc.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/442c6d73682a88897ac60b87a0ecbb85/70acd9d042436d6e9d902a8765892b80.webp)
![](https://filescdn.proginn.com/41b80ef7c6f1b21bcff85228a0a6df87/4ba78c06841b9d75a8d984957b5b4e53.webp)
》声明:文章著作权归作者所有,如有侵权,请联系小编删除。