依稀记得,某年广东语文高考作文的相关描述 — “有时,常识虽易知而难行,有时,常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。

CSS 更新之快,只能不断鞭策自己持续学习,一直呆在舒适区中,很容易? w w . ] ) d n L就跟不上节奏。当然,不仅仅是 CSS,对于任何技术x = F a U [任何行业也可以套用这句话。

回归p y x ( x ] / J ;本文的主题 — 新时代布局。运用现E 1 `有的 CSS 技术,我们是否可以大胆的跳出常规思维,不再局限于矩形框框一块一块,试着更加艺术一些?

像是下面这几个这样R A R ; ^ E a ^ b

不拘一格的线条:

image

文字随图片G 7 d v M R的边缘排I W Z 2 g &列:

image

不再是横平竖直:

image

又或者造型怪@ _ E 3 e = Y异的网格:+ 4 % z w { , n ^

image

是不是很有意思?不拘一格= l 4的布局能够给页面吸引更多的目光和流量,@ ( =当然这也需要我对 CSS 掌握的足够好,才能在有限的属性中创造更多不同的可能性。: a d + 6 e

grid 布局

说到新| j U 6 3时代布局和创意布局,就@ e Q . J n f X不得不提到 Grid 的布局。

CSS Grid 布局的二维特性,让我9 0 d7 t R D E {相较于传统的float布局、定位布局、flex 布_ t e局有了对页{ T 3 D q ( + k v面更强大的掌控力。

利用 Gru I 5 P ?id 布局,切割页面进行分块

这里,我们利用 Grid 布局的特性,可^ 3 Z i + {以将页面按z / [ W ; H f ;照我们的所想任意切割成不同的块状区域。

这里推荐一些能够方\ b H便我$ b ] x m @ % ^ o们进行 Grid 布局的工具:

  • U / J ; 6 c速进行 Grid, _ } 布局 – Grid Layoutit

利用这个工具,可以快/ Z [ : H f速创建得到自[ G W p己想要 Grid 布局,并且拿到对应q s ; I { z的 CSS,非常Y p X q的简单便捷。

这里我利用工具,将页l E ^ S % v面切割成了 A、B、i z 6C、D、E、F 6 块区域:Q s 8

image

复制右侧的 HTML 和 CSS,可以$ I . A p 3 A快速的得到这样一个布[ A R局,我把代码拷贝\ ( ] ^ \ `到了 CodC @ C z 2 6 _ fePen,简; \ . 4 s ( %单添加了一下底色,我们就可以基于这个布局再去做任何事情:

CodePen Demo — Grid Layout Demo

利用 Grid, u t I F N 0 e 布局; / * c X l配合 cf Y ( C _ i +lip-pao p Z e G 9 fth 实现 GTA5 封面

这里,我们v { T } Z , 8 d可以利用 Grid 布局配合 clip-path 实现o a 8 N W Y C m { GTA5 封面,像是D r j / B n这样:

我们f o s & d & H将一个 4xQ z ? K F g { 24 的 Grid 网格,分割为 9 个不同的部分:

l x y P u 1 :利用 cs B `lip-A H z c _ I H P {path,根据封面图片的的造型,对每一块 Gird item 进行二次裁+ ! [ r # t剪:

ok,最后把里面的色块替换成具体的图片即可:

CodePen Demo — GTd V n ;d = |A 5 poster ( Grid and Clip Path)

当然这里有一个槽点,最终t + 6还是用了 9 张图片,那为什么不一开始直接用一张图片呢?

Grid 是在进行复杂布局的过程中非} E k常好的帮手,它非常N o # s M适合各T u Q I s种不规则网格块的布局,这里再提供一个 DEMO:

作者N d @ q P T u P p * T是 Olivia Ng,Demo 的链接 — CodePen Demo — CSS Grid: Train Ticket

瀑布流布局

瀑布流布局在现代布局中也非常^ n @ . . b & L常见,通常在一些( J V $ ` , @照片墙中使用。像是这* ^ m e 2 1 5样:x e H { V + L r

在之3 W H u d / L前,不借助 JavaScript,我们有 3 种纯 CSS 的方式可以实现伪瀑布流布局(u u N注意,这里是伪瀑布流9 3 g | ,),分别是:

  • 使Q j 5 8 N : d M用 CSS column 实现瀑布流布局
  • 使用 CSS flex 实现瀑布流布局
  • 使用 CSS grid 实现瀑布流布局

你可以点进 Demo 看看,利用上/ _ l w _ G述三种方式实现的瀑布流布局,缺点比较明显:

  • 对于 flex 和 column 布局而言,只能实现竖直排布的瀑布S y 0 w流布局,第一列填充满了填充第二列,以此类推
  • 对于 Grid 布局而言,缺点则是无F E t 9 ; f法自动适配不同的高度,需要手动指定每一个元素区块; g / / 1 A大小

而在未来,标准基于 Grid 布局实现了 grid-template-rows: masonry,利用* | Z ~ Z该标准,我们可以快速利用 Grid 实现水平排布s F ]的瀑布流布局,目d ~ p s ! w ? 3 )前,你可以在 Firefox 体验该功能。

使用 grid-template-rows: masonry 实现水平方R , Q向排布的瀑布流布局

grid-templatB j i y I 0e-rows: masonry 是 firefox 在 firefox 87 开始支持的一种基于 grid 布局快速创建瀑布流布局的方式。并且 firefox 一直在推动a \ w D { 3 V p Y该属性进4 ~ w 3 – j入标准当中。

从 firefox 87 开始,在浏^ P c览器输入网址栏输入 about:configi : U & o且开x [ P @layout.css.grid-template-masonry-value.eW ~ g Bnabled 配置使用。Ce M P e 9an i use — grid-template-rowsr z x 6: masonry

正常而言,我们想要实现瀑布流布局还是需要花费一定的功夫的,即h u X [ A 5 J 1便是基于 grid 布局。在之前G $ g b X / & f K7 E I S O u n 4我们通过 grid 布局,通过精细\ X `化控制每一个 grid item,可以实现竖直方向的瀑布流布局:

<div class="g-containerL k _ Q"&c E 5 \ | \ . 0gt;
<div class="g-item">1</div>
&lP 4 n Y DN V B z Rr r : I K ~ ,t;div class=k A g"g-item">2</di\ 2 ^ P o 3v>
<div class="g-Y m L Q T / Z 4itemB E . . q [ l">3</divE H _ 6 . h ) H>
<div clN ! | R H x qass="g-item">4</div&q n [ # /gj g T % = /t;
<div c9 s i Jlass="g-item">5</div>
<div class="g-item">6</div>
<Z z 0 ? i;div classL o N="g1 ( M X r-item">7</div>
<div class="g-item">^ # }8<* G ? 0 2 *;/div>y P x
</div>

.g] Q r = ; ~-container {
heig% s ! F G h n & Bht: 100vh;
displb E 9 A $ O y Aay: grid;
grid-templatB 7 % b l xe-columns: r+ l Z L ! i ~epeat(4, 1fr);
grid-templAu $ r # ) x Oate-rows: repeat(8, 1fr);
}
.g-item {
&H $ x \ E 1 ^ u:nth-child(1) {
grid-column: 1g 1 4 n ; 6 w C;
grid-row: 1 /k w ^ E ! A L 3;
}
&:nth-chF , Aild(2) {\ L 0 /
grid% F \ w / : x-column: 2;
grid-h jG ] 4 O - I Nrow: 1 / 4;
}
&:nt, v lk B } v 2h# : 7-child(` r u3) {
grid-column: 3;
grid-row: 1y S / V { 6 Cg q i s ) A B / 5;
}
&amE Y yp;:nth-child(4\ e T) {
grid-column: 4;
grid-row: 1 / 6;
}
&:nth-child(5) {
grid-col? I f I u 4 Fumn: 1;
gr, L{ R E % ( Z % b Y S Nid-row: 3 / 9;
}
&:nth-child72 b ! ) A } S Z j F $(6) {
grid-column:9 [ ~ ? 2;
gri[ [ } zd-row: 4 / 9;
}
&:nth-chilX 2 5d_ * O * L ] M U s(7) {
grid-column: 3;
grid-row: 5 / 9;
}X t Y % ( D Y F
&:nth-O h Z ? 4 J }child(8) {
grid-column: 4;
grid-r* | F 7 8 ) $ $ow: 6 / 9;
}
}

效果如下:

CSS Grid 实现伪瀑布流布局

Code3 q 6 M pPen Demo — CSS Grid 实现伪瀑布流布局

在上述 Demo 中,使用 grid-tems c L J p *plate-colA b ? _ 9 M QumnsgV p ! O D $rid-teN ~ ) a } wmplateh g/ M s L M S G p $ 6-rowsA X z ( } 分割行列,使用 grid-row 控制每个 grid item 的所占格子的大小,但是这样做的成本太高了,元素一多,计算量也非常大,并且还是在我们提前知道每个元素的高宽的前提下。

而在有了 grid-template-rows: masonry 之后,一切都会变得简单许多,对于一个不确定n j ^ ? D #每个元素高度的 4 列的 grid 布局:

.containc G Uer {
display1 j D : $ 1 *: grid;
grid-c O $ = 7 ^ E 7 Jtemplate-columns: repea$ ] .+ t - Q }t(4, 1fr);
}

正常而言,看到的会是这样:

简单的给容器加上Y ^ u w grQ | : L R I o tid-template-rows: masonr2 m ! zy,表示竖R – S R W方向上,F , E ,采用瀑布流布局:

.: = v xcontaineL [ - r G ;r {
display: grid;
gr[ ^ ? _ 1 k ( E Zid-temc M * Y T N = \ uplate-columa k 6 ins: repeat(4$ Q p, 1fr);
+ grid-template-rows: masonry;
}I j M

便可以轻松的得到这样一种R C W L C |水平方向顺序排4 c $ I布元素? : K v { = Q的瀑布流布局:

如果你在使用 fid v =refox,并且开启D 3 b e jlayout.cc T m ? U / Lss.gri# K ] Gw a : A q r e 6d-template-masonry-value.enabled 配置,可以4 N DH { 6进下面的 DEMO 感受一下:

CodePen Demo~ 2 _ Y R \ p — grid-template-rows: masonry 实现瀑布流布局

多栏布z 9 ^ N 4 9 A Q% W l

多栏布局也属于现在我们能够掌控的布局之一,利用o # \ o c 8 + Z CD 5 i k | F ? ySS 较为新的特性 Multiple-coW + / olumn Layout Properties。

最简单的多栏布局,我们只需要用到 column-cE , R 4 % . W ] fount 或者 column-width

假设我们有如下 HTML:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...&l/ 6 At;/c n @ `p>

简单的 3 列布局:

p {
width: 800px;
colum# p S R p n A (n-count: 3;
font-size: 16px;
lU R Line-heL ! W m Might: 2;
}

通过 colc 4 = e 3 Wumn-count: 3 指定 3 栏。

column-g! a fap 控制间距 & column-rule 控制列o P Q f \ L与列间样式

接下来,我们再了解下 column-gapcs 4 Y Ioluml # 4 = C 4 p %n-rule

  • column-gap:& F K S T O P [控制列与列之间的间隔,默认为关键字 normal,数值上为 1em
  • column-rule:控制列与列之间的样式规则~ l E [ ],其写法与 border 类似,指定列D ` # ! 4 %之间的装饰线

还是如下 Hs ] \ W b J c \ oTML:

<pc Y i>Lorem ipsumn $ # R | f d0 & = t Y3 j r K ( = 7olor sit amet consectetur adipisicingT 7 : _ 0 ; Q , : elit...) S =</p>

简单的 3 列布y M l / X局:

p {
width: 800px;
column-count: 3;
font-st A v \ Qize: 16px;
line-height: 2;
+   cp S &olu} p V r v Gmn: 1px s6 R g R r & F ` =olid #999;g V ` n ] R i F z
+   column-gap: 2emm 7 [ # c;
}

CodJ \ BePen Demo — CSS multi column Layout Demo

column-span 设置跨列

接着,还有一个很有意思的属性 column-span,用于设$ 0 ?置元素的跨列展示。

: + F { q 6 \们首先利用多列布局,实现这样一个类似于报纸排版的布局样式。2 F 6 3 e % ] i

<div class="g-container">
<p>Lore$ 7 ? ; L g O / #m ipsum dolor sit amet ... </p&] 8 ; h E j /gt;
<h2>Title Lorem ipsum dolor sit amet consectetur adiS h Rpisi` { ` $ _cing elit8 e l title</h2>
<| S B r 4 . 8 2;p>Lorem ipsum dolor sit amet ... </p>
<D ; 2 ( L l % { Z;/div>K W 5 ? Q d n / A
.L P T r P R Zg-container {
width: 8! I p ^ y u ? w $00px;
column-count: 3;
column-rule_ R ! p - o: 1px solid #aaa;
column-gap: 2em;
}
h^ 4 - [2 {
margin: 14px 0;
font-size: 24px;
lG V D n nine-he& ; 6 Y X tight: 1.4;
}

大概就是多列布局中嵌套标题,标题的Xw Y [ U 9 L { d加粗并且字号大% # ) ^ ) 4 $ * t一点:

通过给 h2 设置 coa 0 h 9 \ S } elumn-span: all,让 h2 标题跨列多列进行展示,改[ [ @动一` $ ; ) % { 0 J ;下 CSS:

h2 {
marg8 | R @ . Z z f ,in: 14px 0;
font-size: 24px;
line-her ? \ [ % CigL P c {ht: 1.4;
+   column-span: all;
+   teQ c \ Uxt-align: ceu J p 2 E ~nter;
}

即可得到这样一个布局:

CodePen Demo — CSS multi column Layout Demo 2

多栏布局搭配其他布局实现更复杂的布局C ` _ A _ p $

当然,columnK Y / . [ f F x-span 有个缺陷,就是它的取值只有 column-span: all 或者是 column-span: no? K R / c 1ne,也就是要么横跨所有的列,要么不跨列。

如果现在我有一个 3 列布局,但是只希望其中的标题横跨两列,column-span: all 就无法实现了。

但是,通过嵌套其他布局,我们可以巧妙的对多列布局再进行升华,譬如 rb S e :achelandrew 就实现了这I h g样一V 7 S M种嵌套布O N 0 _ 9 $ 6 G 0局:

<div class="container">
<artis v @cle>
<p>By way of preJ d ^caution ...</p>
<h2>the first thaD { 3 It ever burst Into that silent sea;</h2>
<p>E y w X * Nand with what ...</p>
<N X S V * s + d/article>
<aside@ B x I = `>
<img src="https://www.cnblg Ag J & w n V d W Mogs.com/coco1s/p/demo.jpg">
&b . h 7 # 0 U mlt;figcaption>The Authoress, her Father and Mr. Spencer making an ascent<U , b z 6 P !;/% x F : )figcaF j e *ptionJ J 9 J I 7 ) v #>
</aside>
</div>

通过一个 2 列的 Grid 布局,嵌套F # W f t = A一个两列的 multi-column 布局,大致的 CSS 如下B S2 3 : S _ = 4 X h

.container {
max-width: 800px;
display: grid;
grid-gap: 1em;
grid-template-columns: 2fr 1fr;
align-items: start;
}
h2 {
column-spav 1 5n: all;
text-align: center;
}
.container article {
column-count: 2;
coluy D h Nmn-gap: 2em;
column-rule: 1px solid #ccc;
}
.container asideW b H t 0 ~ K z {
border-left: 1px solid #ccc;
padding: 0 1em;
}

这样,我们就能实现视觉上的横跨任意列o s @ G的标题:

完整的 Demo 代码你可以戳这U u e _ } Z ,里:CodePen Demo — SmL M U f h & Z ? sashing Multicol: mixing layout methods — By rK 9 9 I \ Nachelandrew

shape-outside 让布局插上想象的翅膀

OK,进入下一个模块,主角是 shape-outside

在之前,我也有写过一篇关于 shape-outj l *sidR X v ee 的文章 奇妙的 CSS shapes,感兴趣的f 1 X k q h p同学也可以先看& B # | D n看。

s– c G : D G o Q :hape-outside CSS 属性定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。

利用它,我们就能够很好的实现各种非$ R W横平竖直的布局,让布局真正的起来。

图文排列的交界处,可以是斜的,像是这样:

image

CodePen D& \ o y oemo — FCC: Build a Tribute Page – Michel Thomas by Stephanie

也可以是弯曲的,像是这样:

CodePen Demq | / &o — shape-outside: circle Demo

甚至,它l M #是还可以S \ M 1 A \ . B G动态变化的不规则容器:

CodePen Demo — shape-outside animation

合理使用,我们就e # B K * {0 2 j – u d ~ [可以如报纸版创造各种花式布局效果:

不仅如此\ ! 9 + u 0 (,袁川老师 甚至使用了 shape-outside 进行了一些 CSS 艺术创作,一起欣赏一下:

CodePen Demo —^ 7 c B n shape-ow U Z :d 8 2utside —D } / O T Face By yuanchuan

以开篇的这张图为例子:

就是d 1 p ?巧妙d & S N 9 \的运用 shape-outside- , T } - F C Z 的例子,它将整个布局分为了 7 块,每一块分别使用 shape-outside| $ O r 进行精细化的控制,实\ 6 H h B 5 6 U际上完整的布局是这样的:

在这篇m D 2 w + + A y 4文章中,对这个J k \ 9 Y n + r DEMO 进行了非常详细的阐述:A CSS Venn Diagram

如果你也对 shape-ouM I g Ui 0 ^ : 5 X s Ptside 感兴趣,在这份收藏夹里,收藏了 CodePen 上非常多精7 P \ C 6良的 shape-outside 布局 DEMO,不妨一看学习学习 — CSS Shapes Experiments

总结一下

在今天,实现有b m j创意的布局也需要我们掌握更多的 CSS 属性与技巧,本文粗略的介绍了几种在今天实现创意布局的有益属性:

  • Grid 布局全家桶以及利用 Grid 实现瀑布流布局
  • 多栏布局 multiple; Y c-coluA / i G d Z hmn 及多栏布局嵌套其他+ y d k ` q 1布局
  • shape-outs8 7 6 s S 3 : Ride 的各种应用
  • 在上v | P f \ V C q ^述布) ~ F z @ n X $局中穿插9 K *使用 clip-pathtransform 等属性以增强各种布8 { } ] Q 1

当然,CSS 能实现的远不止如此,像是滚动视差、3D 变换等等都是可以利用 CSS 实现并且再融合进布局当中的属性。当然这也需要我们有创造和发现美的眼睛和思维。

最后

好了,本文到此{ x q B结束,希望对你有帮助

更多精彩 CSS 技术文章汇总在我的 Gi7 L =thub — iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果J E X , @ A w还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注