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 左邊兩列定寬，右側自適應

您的項目需求