CSS3实现瀑布流布局(display: flex/column-count/display: grid)

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

在css3到来之前，都是用js来操作dom元素，计算位置，大小，形成瀑布流布局。但是有了css3之后，一切实现起来就太简单了，没有复杂的逻辑，轻松的几行样式代码就可以搞定。

回顾以前（js瀑布流）

基于waterfall.js（11.8kb）,还得写入基础的样式，初始化等等，对比其他js，已经是很简单了。

var waterfall = new WaterFall({ 
 container: '#waterfall', 
 pins: ".pin", 
 loader: '#loader', 
 gapHeight: 20, 
 gapWidth: 20, 
 pinWidth: 216, 
 threshold: 100 
});

但是，有了css3，再简洁的js，都比不过简单的css代码。

display: flex

关键点，横向 flex 布局嵌套多列纵向 flex 布局，使用了 vw 进行自适应缩放

// pug 模板引擎
div.g-container
 -for(var i = 0; i<4; i++)
 div.g-queue
 -for(var j = 0; j<8; j++)
 div.g-item

不熟悉pug模板（jade）的，可以先去了解一下。其实看大致也就懂了，就是循环多个元素，没有复杂的逻辑。

$lineCount: 4;
$count: 8;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 overflow: hidden;
}
.g-queue {
 display: flex;
 flex-direction: column;
 flex-basis: 24%;
}
.g-item {
 position: relative;
 width: 100%;
 margin: 2.5% 0;
}
@for $i from 1 to $lineCount+1 {
 .g-queue:nth-child(#{$i}) {
 @for $j from 1 to $count+1 {
 .g-item:nth-child(#{$j}) {
 height: #{randomNum(300, 50)}px;
 background: randomColor();
 // 瀑布流某块中间的数字
 &::after {
 content: "#{$j}";
 position: absolute;
 color: #fff;
 font-size: 24px;
 // 水平垂直居中
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
 }
 }
}

预览：

CSS 实现瀑布流布局（display: flex）

演示地址：点击文章结尾“了解更多”

column-count

关键点， column-count: 元素内容将被划分的最佳列数 break-inside: 避免在元素内部插入分页符

// pug 模板引擎
div.g-container
 -for(var j = 0; j<32; j++)
 div.g-item

column-count 看起来比display: flex更科学，模板不需要2层循环，更简洁明了。如果真正用到数据上面，会更好处理。

$count: 32;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 column-count: 4;
 column-gap: .5vw;
 padding-top: .5vw;
}
.g-item {
 position: relative;
 width: 24vw;
 margin-bottom: 1vw;
 break-inside: avoid;
}
@for $i from 1 to $count+1 {
 .g-item:nth-child(#{$i}) {
 height: #{randomNum(300, 50)}px;
 background: randomColor();
 &::after {
 content: "#{$i}";
 position: absolute;
 color: #fff;
 font-size: 2vw;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
}

预览：

CSS 实现瀑布流布局（column-count）

演示地址：点击文章结尾“了解更多”

display: grid

关键点，使用 grid-template-columns、grid-template-rows 分割行列使用 grid-row 控制每个 item 的所占格子的大小

// pug 模板引擎
div.g-container
 -for(var i = 0; i<8; i++)
 div.g-item

样式

$count: 8;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 height: 100vh;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(8, 1fr);
}
@for $i from 1 to $count+1 {
 .g-item:nth-child(#{$i}) {
 position: relative;
 background: randomColor();
 margin: 0.5vw;
 &::after {
 content: "#{$i}";
 position: absolute;
 color: #fff;
 font-size: 2vw;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
}
.g-item {
 &:nth-child(1) {
 grid-column: 1;
 grid-row: 1 / 3;
 }
 &:nth-child(2) {
 grid-column: 2;
 grid-row: 1 / 4;
 }
 &:nth-child(3) {
 grid-column: 3;
 grid-row: 1 / 5;
 }
 &:nth-child(4) {
 grid-column: 4;
 grid-row: 1 / 6;
 }
 &:nth-child(5) {
 grid-column: 1;
 grid-row: 3 / 9;
 }
 &:nth-child(6) {
 grid-column: 2;
 grid-row: 4 / 9;
 }
 &:nth-child(7) {
 grid-column: 3;
 grid-row: 5 / 9;
 }
 &:nth-child(8) {
 grid-column: 4;
 grid-row: 6 / 9;
 }
}

display: grid样式上面感觉也不好用，需要书写很多grid-column、grid-row。

预览：

CSS 实现瀑布流布局（display: grid）

演示地址：点击文章结尾“了解更多”

总结

通过，这3种CSS瀑布流布局，你更喜欢哪一种呢？

个人更喜欢column-count，看起来更加清晰，容易理解，代码量也很少。

公告

喜欢小编的点击关注，了解更多知识！

源码地址请点击下方“了解更多”

由于汉字的特殊性，在css网页布局中，中文排版有别于英文排版。排版是一个麻烦的问题，小编认为，作为一个优秀的网页设计师和网页制作人员，掌握一些简单的中文排版技巧是不可或缺的，所以今天特意总结了几个简单实用的技巧，希望对大家有所帮助。

Web前端教程

　　一、如何设定文字字体、颜色、大小等

　　font-style设定斜体，比如font-style:italic

　　font-weight设定文字粗细，比如font-weight:bold

　　font-size设定文字大小，比如font-size:12px

　　line-height设定行距，比如line-height:150%

　　color设定文字颜色，注意不是font-color喔，比如color:red

　　font-family设定字体，比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif

　　二、使用margin，text-align 控制段落

　　中文段落使用p标签，左右、段前段后的空白，都可以通过margin来控制。

　　比如

　　margin:18px 6px 6px 18px;/*分别是上、右、下、左，十二点开始的顺时针方向*/

　　}

　　而text-align则用于文字的对齐方式。

　　比如

　　text-align:center;/*居中对齐*/

　　}

　　除了居中对齐之外,对齐方式还有左对齐、右对齐和两端对齐，对应的属性值分别为left、right、justify。

　　提示：由于默认的margin值会导致页面排版出现问题，特别是ul、ol、p、dt、dd等标签。小编的解决之道就是把所有标签的margin值定义为0。

　　三、竖排文字—使用writing-mode

　　writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。

　　写法如

　　writing-mode:tb-rl;

　　}

　　四、使用list-style美化列表

　　如果我们的排版涉及到列表，不妨考虑为它添加些项目符号进行美化。

在CSS里，项目符号包括disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。

　　嘿嘿！我们可用的项目符号数量不少喔，但美中不足的是我们不能为它们设定大小，也不能设定垂直方向上的对齐。

　　如果我们想设定一个列表的项目符号为方块，可以这样写：

　　li{

　　list-style:square;

　　}

　　小编在这里提醒大家一下：当一个项目列表的左外边距设为零的时候，list-style-position:outside的项目符号不会显示。

　　五、使用text-overflow 实现固定宽度汉字截断

　　用后台语言可以对从数据库里的字段内容做截断处理，如果想对列表应用该样式，我们可以这样写：

　　li{

　　overflow:hidden;

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　}

　　六、首字下沉

　　如果你想制作首字下沉效果，不妨考虑伪对象:first-letter并配合font-size、float属性。

　　p:first-letter{

　　padding:6px;

　　font-size:32pt;

　　float:left;

　　}

　　七、首行缩进—使用text-indent

　　text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

可以这么写

　　text-indent:2em;/*em是相对单位，2em即现在一个字大小的两倍*/

　　}

　　注意：如果font-size是12px的话，那么text-indent:2em则代表缩进24px。

　　八、固定宽度汉字（词）折行—使用word-break

　　在排版的时候，你是否为一个词组，其中一个字出现在上面而另一个字折断到下一行去而发愁呢？不用愁，这时使用word-break就可以轻松解决问题了。

　　九、关于汉字注音—使用ruby标签和ruby-align属性

　　最后小编向大家介绍一下ruby标签和ruby-align属性。这是一个比较冷门的技巧，可能平时使用不多，但小编觉得不妨提供给大家预防不时之需。

　　如果我们想为汉字注音就可以这样写

　　<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

　　然后通过ruby-align设置其对齐方式。

以上就是今日整理的“Web前端教程：简单实用的CSS网页布局中文排版技巧”一文，希望为正在学习Web前端的同学提供参考。你记住并理解了吗？以后酷仔每日均会提供MySQL、Python及Web相关的教程及习题，赶快学习起来吧。

.单列布局

1.1 水平居中

父元素 text-align:center;子元素：inline-block;

优点：兼容性好；
不足：需要同时设置子元素和父元素

<divclass="parent">
<divclass="child"></div>
</div>

.parent{
width: 500px;
height: 200px;
background: red;
text-align: center;
}
.child{
display: inline-block;
width: 300px;
height: 100px;
background: blue;
}

子元素 margin:0 auto;

优点：兼容性好
缺点：需要指定宽度

<divclass="parent">
<divclass="child"></div>
</div>

.parent{width: 500px;
height: 400px;
background: red;
}
.child{margin: 0 auto;
width: 300px;
height: 100px
;background: blue;
}

父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

优点：兼容性好
缺点：需要知道元素的宽度

<div class="parent">
  <div class="child"></div>
</div>

 .parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 100px;
  background: blue;
}

父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

优点：不需要知道子元素的宽度
缺点：兼容性差（新时代的你们，现在新的浏览器支持了，放心用了）

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 300px;
  height: 100px;
  background: blue;
}

弹性盒子：父元素：display:flex;justify-content:center;

优点：简单
缺点：兼容性差（新时代的你们，现在新的浏览器支持了，放心用了）

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  display: flex;
  justify-content: center;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
}

1.2 垂直居中

vertical-align:center;

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: table-cell;
  vertical-align: middle;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
}

line-height

<divclass="parent">
<divclass="child">
</div></div>

.parent {
  width: 500px;
  height: 400px;
  background: red;
  line-height: 400px;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
  display: inline-block;
  vertical-align: middle;
}

父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 300px;
  height: 100px;
  background: blue;
}

父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 400px;
  background: red;
}
.child {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -50px;
  width: 300px;
  height: 100px;
  background: blue;
}

父元素：display:flex;align-items:center;

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: flex;
  align-items: center;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
}

1.3 水平垂直居中

父元素：display:table-cell;vertical-align:middle;text-align:center;子元素；display:inline-block;

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
  display: inline-block;
}

父元素：position:relative;子元素：position:absolute?50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者 transform:translate(-50%,-50%);

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  width: 500px;
  height: 400px;
  background: red;
  position: relative;
  left: 0;
  right: 0;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

父元素{display:flex;justify-content:center;align-items:center;}

<divclass="parent">
<divclass="child"></div>
</div>

.parent {
  width: 500px;
  height: 400px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 300px;
  height: 100px;
  background: blue;
}

2.多列布局

2.1 左侧定宽，右侧自适应

left{float:left;width:100px;} .right{margin-left:100px;}

<div class="left">left</div>
<div class="right">right</div>

* {
  margin: 0;
  padding: 0;
}
.left {
  height: 400px;
  width: 300px;
  background: red;
  float: left;
}
.right {
  height: 400px;
  margin-left: 300px;
  background: blue;
}

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right-fix">
    <div class="right">
      right
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.left {
  width: 300px;
  height: 400px;
  float: left;
  background: red;
}
.right-fix {
  width: 100%;
  margin-left: -300px;
  float: right;
}
.right {
  margin-left: 300px;
  height: 400px;
  background: blue;
}

.left{width:宽度值;float:left;} .right{overflow:hidden;}

<divclass="parent">
<divclass="left">   
  left   
</div><divclass="right">   
  right   
</div>
</div>

/*设置overflow:hidden;创建BFC。根据BFC特性，BFC不会与float box 重叠。*/

* {
  margin: 0;
  padding: 0;
}
.left {
  width: 300px;
  height: 400px;
  float: left;
  background: red;
}
.right {
  height: 400px;
  background: blue;
  overflow: hidden;
}

table 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.parent {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.left {
  width: 300px;
  height: 400px;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  display: table-cell;
}

flex 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.parent {
  display: flex;
  width: 100%;
}
.left {
  width: 300px;
  height: 400px;
  background: red;
}
.right {
  height: 400px;
  background: blue;
  flex: 1;
}

2.2 右侧定宽左侧自适应

float margin 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.left {
  width: 100%;
  height: 400px;
  background: red;
  float: left;
  margin-right: -300px;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
  float: right;
}

table 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.left {
  width: 100%;
  height: 400px;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
  display: table-cell;
}

flex 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
  display: flex;
}
.left {
  flex: 1;
  background: red;
  display: table-cell;
}
.right {
  height: 400px;
  background: blue;
  width: 300px;
}

2.3 左边两列定宽，右侧自适应

float margin 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
}
.left,
.center {
  background: red;
  float: left;
  width: 300px;
  height: 400px;
}
.center {
  background: yellow;
}
.right {
  height: 400px;
  background: blue;
  margin-left: 600px;
}

float overflow 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 100%;
}
.left,
.center {
  background: red;
  float: left;
  width: 300px;
  height: 400px;
}
.center {
  background: yellow;
}
.right {
  height: 400px;
  background: blue;
  overflow: hidden;
}

table 实现

<div class="parent">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

margin: 0;

padding: 0;

}

.parent{

width: 100%;

display: table;

table-layout: fixed;

}

.left,

.center{

background: red;

display: table-cell;

width: 300px;

height: 400px;

}

.center{

background: yellow;

}.right{

height: 400px;

background: blue;

display: table-cell;

}

想要更多关于前端培训学习资料，可以关注“广州蓝景”微信公众号，进行详细的了解。

在线咨询

上一篇：HTML的入门及结构组成
下一篇：讲道理，这些都是网页设计中最基础的字体排版知识

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS3实现瀑布流布局(display: flex/column-count/display: grid)

前言

回顾以前（js瀑布流）

display: flex

column-count

display: grid

总结

公告

.单列布局

1.1 水平居中

父元素 text-align:center;子元素：inline-block;

子元素 margin:0 auto;

父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

弹性盒子：父元素：display:flex;justify-content:center;

1.2 垂直居中

vertical-align:center;

line-height

父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

父元素：display:flex;align-items:center;

1.3 水平垂直居中

父元素：display:table-cell;vertical-align:middle;text-align:center;子元素；display:inline-block;

父元素：position:relative;子元素：position:absolute?50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者 transform:translate(-50%,-50%);

父元素{display:flex;justify-content:center;align-items:center;}

2.多列布局

2.1 左侧定宽，右侧自适应

2.2 右侧定宽左侧自适应

2.3 左边两列定宽，右侧自适应

您的项目需求