收藏!40 个 CSS 布局技巧

阿里妹导读: CSS是 Web开发中 不可或缺的一部分, 随着Web技术的 不断 革新, CSS也 变得 更加强大 CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中,现代CSS特性就可以更好的帮助我们快速实现如等高布局,水平垂直居中,经典的圣杯布局、宽高比例、页脚保持在底部等效果。淘系前端技术专家大漠将详细介绍一些不同的CSS属性来实现这些效果,希望对同学们有所帮助。

文末福利 :下载《前端代码是怎样智能生成的》电子书。

一  水平垂直居中

如何实现水平垂直居中可以说是CSS面试题中的经典面试题,在多年前这个面试题给很多同学都带来了困惑,但Flexbxo布局模块和CSS Grid布局模块的到来,可以说实现水平垂直居中已是非常的容易。

Flexbox中实现水平垂直居中

在Flexbox布局模块中,不管是单行还是多行,要让它们在容器中水平垂直居中都是件易事,而且方法也有多种。最常见的是在Flex容器上设置对齐方式,在Flex项目上设置 margin:auto

先来看在Flex容器上设置对齐方式。

Flex容器和Flex项目上设置对齐方式

你可能已经知道在Flex容器上设置 justify-content align-items 的值为 center 时,可以让元素在Flex容器中达到水平垂直居中的效果。来看一个示例:



<div class=“flex__container”>
<div class=“flex__item”>div>
div>


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

效果如下:

这种方式特别适应于让Icon图标在容器中水平垂直居中,不同的是在Icon图标容器上显示设置 display: inline-flex 。比如下面这个示例:



<div class=“flex__container”>
<svg> svg>
div>


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

效果如下:

在这种模式之下,如果要让多个元素实现水平垂直居中的效果,那还需要加上 flex-direction: column ,比如:



<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;
}

效果如下:

在Flexbox布局中,还可以像下面这样让Flex项目在Flex容器中达到水平垂直居中的效果:



<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;
}

效果如下:

如果在Flex容器中有多个Flex项目时,该方法同样有效:


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


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

比如下面这个效果:

除此之外,还可以使用 place-content: center 让Flex项目实现水平垂直居中:


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


.flex__item {
align-self: center;
}

效果如下:

或者换:


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

效果如下:

这两种方式同样适用于Flex容器中有多个Flex项目的情景:


.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;
}

效果如下:

可能很多同学对于 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项目上设置margin: auto

如果在Flex容器中只有一个Flex项目,还可以显式在Flex项目中显式设置 margin 的值为 auto ,这样也可以让Flex项目在Flex容器中水平垂直居中。例如:


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


.flex__item {
margin: auto;
}

效果如下:

整个过程,你可以通过下面这个示例来体验。尝试着选中不同方向的 margin 值:

Grid中实现水平垂直居中

CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。

在CSS Grid布局中,只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如下面这个示例:



<div class=“grid__container”>
<div class=“grid__item”>div>
div>


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

效果如下:

在CSS Grid布局模块中,只要显式设置了 display: grid (或 inline-grid )就会创建Grid容器和Grid项目,也会自动生成网格线,即行和列(默认为一行一列)。

在没有显式地在Grid容器上设置 grid-template-columns grid-template-rows ,浏览器会将Grid容器默认设置为Grid内容大小:

这种方法也适用于CSS Grid容器中有多个子元素(Grid项目),比如:



<div class=“grid__container”>
<div class=“avatar”>🙂div>
<div class=“media__heading”>div>
<div class=“media__content”>div>
<div class=“action”>div>
div>

这个时候你看到的效果如下:

而且 palce-items 适用于每个单元格。这意味着它将居中单元格的内容。比如下面这个示例:



<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;
}

效果如下:

二  等高布局

等高布局也是Web中非常常见的一种布局方式,而且实现等高布局的方案也有很多种。这里我们主要来看Flexbox布局模块和Grid布局模块给我们带来了什么样的变化。

在Flexbox和Grid布局模块中,让我们实现等高布局已经是非常的简单了,比如:



<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

这个时候你看到的效果如下:

这种方式特别适用于卡片组件中:

在Grid布局模块中类似:



<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; /* 根据需求调整值*/
}

效果如下:

同样在一些卡片类布局中运用:

如果需求有所调整,比如在Flex项目 或 Grid项目的子元素高度和容器高度相同。



<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%;
}

效果如下:

三  Sticky Footer

首先用下图来描述什么是Sticky Footer布局效果:

Sticky Footer实现方案和等高、垂直居中一样,同样有很多种方案可以实现。

比如像下面这样的结构:



<header>header>
<main>main>
<footer>footer>

先来看Flexbox布局模块中的实现方案:


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


footer {
margin-top: auto;
}

可以尝试着在 main 区域右下角向下拖动,改变主内容区域的高度,你会发现“当内容不足一屏时,

会在页面的最底部,当内容超出一屏时,

会自动往后延后”。

在Flexbox布局中,还可以在

区域上设置下面的样式,达到相等的效果:


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


main {
flex: 1 0 auto;
}

效果如下:

中的 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

区域根据Grid容器剩余空间来做计算。


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

效果如下:

四  均分列

在Web布局中,很多时候会对列做均分布局,最为常见的就是在移动端的底部Bar,比如下图这样的一个效果:

在Flexbox和Grid还没出现之前,如果希望真正的做到均分效果,可以用 100% (或 100vw )除以具体的列数。比如:



<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);
}

效果如下:

通过浏览器调试器中可以发现,现个列的宽度都是相等的:

在Flexbox和Grid布局中,实现上面的效果会变得更容易地多。先来看Flexbox中的布局:



<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;
}

效果如下:

在Flexbox布局模块中,当flex取的值是一个单值(无单位的数),比如示例中的 flex:1 ,它会当作显式的设置了 flex-grow: 1 。浏览器计算出来的 flex

接下来看Grid中如何实现上例的效果:



<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表示具体的列数*/
}

最终的效果是相同的:

这样的布局方式也适用于其他的布局中。但不管是Flexbox还是Grid布局中,都存在一定的缺陷,当容器没有足够的空间容纳Flex项目(或Grid项目)时,Flex项目或Grid项目会溢出(或隐藏,如果Flex容器或Grid容器显式设置了 overflow:hidden ):

修复这种现象最简单的方式是在Flex容器或Grid容器显式设置一个 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的基准值 */
}

你可以尝试着调整浏览器的视窗宽度,当浏览器的视窗越来越小时,Flex容器宽度也就会越来越小,当Flex容器小到没有足够的空间容纳四个Flex项目(就此例而言),那么Flex项目就会断行排列:

基于该例,如果把Flex项目的 flex 值改成:


.flex__item {
flex: 0 0 400px;
}

这个时候,当Flex容器没有足够空间时,Flex项目会按 flex-basis: 400px 计算其宽度,Flex容器没有足够空间时,Flex就会断行:

反过来,如果Flex项目的值 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;
}

效果如下:

如果你对这方面知识感兴趣的话,还可以移步阅读《Container Query Solutions with CSS Grid and Flexbox》一文。

其实在Grid中与 auto-fit 对比的值还有一个叫 auto-fill 。但两者的差异是非常地大,用下图来描述 auto-fit auto-fill 的差异:

另外这种方式也是到目前为止一种不需要借助CSS媒体查询就可以实现响应式布局效果。

五  圣杯布局

圣杯布局(Holy Grail Layout))是Web中典型的布局模式。看上去像下图这样:

对于圣杯布局而言,HTML结构是有一定的要求,那就是内容为先:



<header>header>
<main>
<article>article>
<nav>nav>
<aside>aside>
main>
<footer>footer>

在这里主要还是和大家一起探讨,如何使用Flexbox和Grid布局模块来实现圣杯布局。先来看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;
}

效果如下:

通过在 nav aside article 上显式设置 order 的值,可以很好的控制这三个区域的布局顺序。比如说,希望