先聊聊布局方面的知識(shí)，先列據(jù)一個(gè)實(shí)現(xiàn)三欄水平布局（左右定寬，中間自適應(yīng)）案列，目前有圣杯布局、雙飛翼布局、Flex布局和絕對(duì)定位布局的幾種經(jīng)典布局。

相同點(diǎn)：

差異點(diǎn)：

DOM節(jié)點(diǎn)結(jié)構(gòu)：

雙飛翼布局比圣杯布局多使用了一個(gè)div，少用大致4個(gè)css屬性，比圣杯布局思路更直接和間接一點(diǎn)。

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為 Flex 布局， Flex 布局將成為現(xiàn)代瀏覽器的首選方案。

絕對(duì)定位 position: absolute 使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。PS：這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

柵格

以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布，通俗一點(diǎn)的就是在一個(gè)特定區(qū)域內(nèi)劃分出有規(guī)律的格子，并依靠這些格子進(jìn)行有規(guī)律的版面布局。

柵格布局的作用

柵格布局的使用

現(xiàn)大多數(shù)UI框架設(shè)計(jì)上都會(huì)設(shè)計(jì)柵格化系統(tǒng)，比如 bootstrap(jquery) 、 element(vue) 、 antD(react) 等。

Bootstrap 的柵格化系統(tǒng)采用將頁面布局分為12列，再根據(jù)頁面寬度采用預(yù)定義類控制模塊占用寬度比例（寬度百分比）的思想，實(shí)現(xiàn)響應(yīng)式布局。

Bootstrap將屏幕大小分為4類，主要關(guān)鍵點(diǎn)是媒體查詢 @media 。

官網(wǎng)中對(duì)Layout 布局的定義是： 通過基礎(chǔ)的 24 分欄，迅速簡便地創(chuàng)建布局.Element是基于 vue.js 開發(fā)的UI框架，其設(shè)計(jì)的柵格系統(tǒng)也與 Bootstrap 類似，可選 flex 方式滿足現(xiàn)代瀏覽器，組件開發(fā)的目的都是為了解決基本布局定位的問題。

主要組件為 Row 與 Col , 其中 Row 為行布局容器, Col 為列布局容器.

參照了 Bootstrap 的 響應(yīng)式設(shè)計(jì)，預(yù)設(shè)了五個(gè)響應(yīng)尺寸：

antD 是Ant Design 團(tuán)隊(duì)基于 React 開發(fā)的一套企業(yè)級(jí)后臺(tái)UI框架，其柵格整個(gè)設(shè)計(jì)建議區(qū)域按照 24 等分的原則進(jìn)行劃分

支持 Flex 布局，允許子元素在父節(jié)點(diǎn)內(nèi)的水平對(duì)齊方式 - 居左、居中、居右、等寬排列、分散排列。子元素與子元素之間，支持頂部對(duì)齊、垂直居中對(duì)齊、底部對(duì)齊的方式。同時(shí)，支持使用 order 來定義元素的排列順序

參照 Bootstrap 的 響應(yīng)式設(shè)計(jì)，預(yù)設(shè)六個(gè)響應(yīng)尺寸：

怎么實(shí)現(xiàn)一個(gè)基本柵格化？

通常一個(gè)基本的柵格化系統(tǒng)包括：

為了給整個(gè)柵格系統(tǒng)設(shè)置寬度，我們需要一個(gè)容器。容器的寬度通常為100%，但你可能希望為更大的顯示器設(shè)置最大寬度 max-width 。

行元素用于防止里面的列（ column ）溢出到其他的行。通常會(huì)使用 clearfix 來清除浮動(dòng)，因?yàn)槲覀兪峭ㄟ^浮動(dòng)來制作柵格系統(tǒng)的。

列元素是柵格系統(tǒng)的核心，也是最復(fù)雜的一部分。因?yàn)榱械亩ㄎ豢梢杂泻芏鄬?shí)現(xiàn)方式，同時(shí)還需要考慮它的寬度以及響應(yīng)式設(shè)計(jì)等因素。

列的位置

Floats 、 inline-blocks 、 display-table 、 display-flex 他們都可以實(shí)現(xiàn)柵格布局中，列的定位。先選取使用 float ，如果列都是空的，浮動(dòng)的列都會(huì)貼在彼此的頂部。為了避免這種情況：

列的寬度

由于容器總寬度是100%，我們想要6列，所以每列寬度為：100 / 6 = 16.66

這里我們把一行分成六列，通過簡單的計(jì)算，還可以定義列的多種寬度。

列的間隙 (Column Gutters)

由于列的寬度單位是響應(yīng)式的百分比(%)，我們給列元素的間距是固定單位的 padding（px單位） ，為了避免復(fù)雜的計(jì)算，我們規(guī)定所有的盒子模型為 border-box 類型。

為了適配更多分辨率的布局，我們只需改變列的寬度。

比如當(dāng)屏幕寬度小于1000px時(shí)，為了布局更簡潔，我們使用兩倍列的寬度，一行六列變?yōu)榱艘恍腥小?/p>

當(dāng)屏幕寬度比1000px還小時(shí)