現在CSS浮動清楚定義了現在的網頁布局，基于幾個世紀以來的印刷理論，盡管他們運用起來很合適，嚴格來說，浮動并非是那個目的。就像表單布局一樣，在90年代并沒有阻止我們的前進。

然而，網頁布局的未來確實是清晰明亮的，這要歸功于彈性盒子。CSS布局機制是讓我們安排元素在一個真正的網格空間。一些元素被固定，其他的可以滾動。他們的順序可以獨立于他們原來的順序。所有的這些元素都可以適配一系列屏幕，從寬屏到智能手機，甚至是一些還沒有想到的設備，瀏覽器支持也非常棒。所以這是一個很好的加入彈性盒子布局方式的時機，如果你還沒有嘗試過的話。

但是改變我們的方式并不是那么容易的。彈性盒子有著令人眼花繚亂的特性，這些特性很少有相似的，引入他需要花點時間。幸運的是，為了達到這個布局目的，你只需要了解很少的理論知識。讓我們看下我們如何創建一個類似于Gmail的網站，基于彈性盒子布局原理的界面。假如你們有探索或者深入理解彈性盒子布局這種理論，這篇文章將會再次解釋那些曾經困惑你的地方。

彈性盒子理念

彈性盒子理論需要一個全新的思考方式。代替從左到右，從上到下的行與列的排列布局，我們在一條線上安排元素——實際上，是兩條線，一個主軸線和一個交叉軸線，但今天創新互聯要用的是第一個主軸線。考慮到主軸線沿著盒子（div或者其他html元素）排列，這個類似于繩子的無形軸線，從容器的一端延伸到另一端。這引出四個很有趣的概念。

對齊

首先，我們可以沿著繩子分割這個盒子，使元素到一端，這樣集中分布它們。那意味著元素可以緊鄰屏幕的左邊或者右邊，無論屏幕有多寬。甚至這樣分配可以滿足任何尺寸的屏幕，這是最好的在我們的多屏幕世界中。

彈性盒子允許設計師將HTML的元素推向繩子的任何一端

方向

其次，我們也可以翻轉這個繩子，因此盒子向反方向翻轉而不用去編輯HTML。這和排序技術很相似，允許我們翻轉排列——除了第三個特征進一步來區分它們的不同。

元素的順序和位置都可能被翻轉

定位

第三，可以通過90度轉動繩子從容器的頂部吊著，而不是從一邊運行到另一邊。

全部排列可以旋轉90度，懸掛在容器的頂部

次序

最終，我們可以控制盒子的次序，沿著繩子哪一個排第一、第二、第三等等，而不用去編輯HTML。這是很厲害的，意味著我們可以控制HTML的文檔結構。想讓元素垂直居中排布？沒有問題。想在你的HTML結束但在你開始布局時導航？當然可以。想嘗試一下不同的布局？全部需要用到CSS理論。就像這樣，我們已經開始考慮就文檔內容和設備，而不是固化的柵格。

HTML元素的順序可以通過CSS屬性來改變，而不需要去改變HTML結構本身

有很多知識，但是這里只講一些基礎的理論：

1. 塊級元素緊緊的沿著一條不可見線

2. 我們可以沿著那條線推動元素

3. 我們可以翻轉繩子，這樣就可以翻轉盒子的順序。

4. 我們可以沿著繩子按任何方式來改變盒子的順序，而不用考慮改變HTML。

順序

順序是一個很重要的概念在彈性盒子理論中。讓我們舉一個簡單的HTML文檔:一個傳統的博客一般包含這幾點信息。

• 頭部

網站的標題，描述，查詢表單（這些框架告訴人們網站信息，已確保讓他們知道自己在那里）

• 變換屬性

作者，日期，主題（這些信息可以幫助人們了解這是否是他們所需要的）

• 主要內容

網頁的主要內容是什么

• 提供服務的內容

一些相關的信息

• 導航

可以指引你到達網站的各個網頁

• 尾部

版權信息，訂閱信息，社交媒體，信息登記

為了可以被搜索引擎檢索和用戶瀏覽，這些元素被按順序排列。現在，我們把這個繩子從移動設備的頂部懸掛下來，記錄他們，并且把主要內容放在首位。

1. 主要內容

2. 變換屬性

3. 補充內容

4. 頭部

5. 導航

6. 尾部

然而，在電腦桌面端又有不同的瀏覽順序

1. 頭部

2. 變換屬性

3. 主要內容

4. 補充內容

5. 導航

6. 尾部

等一下，那不是正確的順序。我們希望導航在頂部，彈性盒子可以很輕松的做到這一點。這條繩子也可以放進彈性盒子內部，并且所有的規則同樣適用。

嵌套繩子和盒子

每一個彈性盒子布局都可以在容納另外的盒子按照他們各自的繩子排列，這條繩子可以從左到右排列反之亦然，也可以從上到下反之亦然，也可以把盒子推向另一邊，居中來分布。因為彈性盒子的靈活性打開了各種可能性，他也意味著我們需要仔細的考慮我們的布局。

盒子沿著彈性繩子排列的時候，也可能包含著其他彈性盒子

我們從一些內容舉例開始，看下它為何變得復雜了。這不是按照布局的順序（你所看到的順序）假想一下你給一個觀眾一個描述，你告訴他們你將說什么，然后你說了，然后你在總結下你剛說的內容。我們假設的頁面也是按照相似的結構。

• 頭部
• 當前信息
• 信息列表
• 盒子內部的一些鏈接
• 尾部

描述一個設計

為了使事情簡單一些，我們會在一個相似的布局上開始工作。

一個典型的郵箱APP排版布局

這里有兩個彈性盒子布局，第一個有三個盒子從上到下。第二個布局是在中間的盒子，從右到做排列。

頭部、尾部的寬度和視口寬度一樣。導航欄適配在左邊，當主要內容信息不能被完全容納后，區域允許出現滾動條。為了達到這個目的，需要設置一些浮動和絕對定位，但是彈性盒子給了我們更多的選擇，接下來我們一起看下。

設置文檔

外部的容器只有三個部分，包裹在一個彈性容器元素內：

我們用語義表達方式把它稱之為彈性盒子，至少我們的CSS會更通順。

在盒子內部，我們需要三個層級塊：

這個例子用這個段落作為一個獨立的整體，而不是文章中的段落。

聲明這些元素為彈性盒子

我們需要告訴瀏覽器這些元素是彈性布局，可以伸縮的。

注意到這個可以使彈性盒子應用在主要的容器上，而不是內容本身。

增加一些維度

根據原型設計圖，我們了解到確定的元素需要有自身的長度和寬度。網站的頭部和尾部相對于主題內容來說要短一點，相對于左邊很窄的導航工具欄。文章的內容區域占據了剩下的空間區域。為了保持靈活的布局而不考慮屏幕尺寸（這篇教程所聲明的），這些區域不會設置固定的寬度。

這里，我們將 flex-basis比喻為寬度，只要主軸是水平的，如果我們將繩子從上到下掛起來，那么 flex-basis 將自動變為高度！

使主要部分可滑動

這個是很容易的。只需要設置添加 overflow:scroll。對于主要的元素避免他被頭部和尾部所覆蓋。小提示：嘗試overflow:auto 隱藏滾動條（當他們不是必須的時候）在大多數瀏覽器中。

測試內容

在這一點上，頭部的表單浮動，需要設置一點邊距，即使當瀏覽器被重置。主要部分應當很好的浮動不管在任何尺寸的瀏覽器中。假如瀏覽器不能友好的支持彈性盒子，那么這個頁面將變為主要內容優先的布局方式。

知道哪些瀏覽器不支持彈性盒子是很重要的。每個最新的版本基本上都支持，但是，有個問題是用戶何時更新他們的軟件。那么哪些版本開始這些瀏覽器支持彈性盒子呢？

• 谷歌31以及以后
• 火狐31以及以后
• IE瀏覽器10及以后
• 電腦版Safari 7及以后
• iOS版 7.1及以后
• 安卓4.4及以后
• 谷歌安卓版42及以后
• 歐朋27及以后

那么老的瀏覽器怎么辦呢？解決方案大相徑庭，取決于你正在努力達到的布局,盡管我們可以推出一些技巧。

最安全的方式讓彈性盒子好的支持瀏覽器，是按照順序把CSS寫在他將出現的地方。按照語義化的思考方式開始，老版本瀏覽器將忽視彈性盒子的屬性信息，感謝的是，好的條件注釋將允許我們應用浮動和清除布局。老版本的瀏覽器往往可以給你更清晰的邏輯順序，因此彈性盒子和浮動將并存。智能的瀏覽器將會應用彈性盒子布局，盡管邏輯上瀏覽器應當忽視它們。最后，假如你想試驗下，那么嘗試Flexie,一個基于JavaScript的polyfill的老版本瀏覽器工具。

本文來自成都品牌網站建設網站設計制作公司-創新互聯 

標簽：創新互聯,高端網站建設,企業建網站,響應式網站

分享標題：關于盒子理論與網頁設計
分享地址：http://m.kartarina.com/news31/168581.html

成都網站建設公司_創新互聯，為您提供網站制作、網站改版、定制網站、網站排名、動態網站、網站策劃

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯