在網(wǎng)站建設(shè)過程中內(nèi)容的排版和布局往往是整個建設(shè)工作的重點和難點，如果能熟練掌握CSS彈性布局的話，無論是頁面的整體設(shè)計還是局部內(nèi)容的布局，都能起到事半功倍的效果。尤其是對非專業(yè)的或剛開始從事前端開發(fā)的人，掌握了這種布局方式會讓人有一種瞬間頓悟的感覺：網(wǎng)頁布局也不過如此嘛。今天洛壹網(wǎng)絡(luò)簡單為大家講解一下CSS彈性布局的奇妙之處。

首先在我們在屏幕生成一個寬300px，高200px的DIV作為容器，通過display: flex屬性，可將該DIV聲明為塊級彈性容器

“.div1{display:flex;width:300px;heigth:200px;border: 1px solid orange;}”

我們可以把這個容器想象成一個箱子，往箱子里面擺放了三個球，下面看看球的幾種擺放方式，先定義一個球的樣式

.ball {width: 50px;height: 50px;border: 1px solid #2196f3;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 28px;}

將球放進容器里

定義了6中擺放方式，其中第一排箱子主要應(yīng)用了justify-content屬性，這個屬性可以理解為水平對齊方式，第二排主要應(yīng)用了align-items屬性，這個屬性可以理解為垂直的對齊方式。具體的屬性值請參考下表。

左上角第一個為序號1，以此類推

除了上面6種對齊方式外，還有很多很多種，感興趣的可以一一嘗試一下。只要把塊級元素聲明為彈性的，里面的元素可以通過各種方式隨意擺放。如果箱子里面的球太多的話，也可以設(shè)置為自動換行方式，設(shè)置屬性flex-wrap: wrap即可

flex-wrap: wrap;justify-content: space-around;align-content: flex-start;

通過屬性flex-wrap:wrap設(shè)置箱子內(nèi)的球自動換行，同是將水平對齊設(shè)置為兩頭有空白的兩端對齊（space-around，兩頭沒有空白的是space-between），將垂直對齊方式設(shè)置為頂部對齊align-content: flex-start，得到下圖的擺放方式。

在了解了彈性布局后我們來看看實際項目中有哪些地方可以用到彈性布局來快速解決問題

完全居中對齊

有時我們想在一個格子內(nèi)顯示的文本或圖片要水平和垂直方向都是居中對齊的，就是顯示在格子的正中央，使用彈性布局的水平和垂直方向都是居中對齊即可。本文中上例的球體內(nèi)的文字就是這種顯示方式，樣式設(shè)置如下：

display: flex; justify-content: center; align-items: center;

平均分配寬度

很多APP的底部菜單的寬度都是平均分配，主要應(yīng)用了屬性 flex:1，其中1代表占了1份。

將球的樣式 .ball 修改為

display: flex;justify-content: center;align-items: center;flex: 1;height: 50px;

底部有5個菜單每個菜單的flex值都是1，可以理解為每個菜單的寬度是1/5，于是就可以平均分配寬度了。把flex的值設(shè)置為2也可以，只要每個菜單的值一樣，它們的寬度就是一樣的。所以如果把【首頁】的flex值設(shè)置為2，其它菜單的flex值設(shè)置為1，相當于把箱子的寬度平均分為6份，【首頁】占了2/6，其他的占了1/6,即首頁的寬度是其它菜單寬度的2倍。

一邊的寬度固定，另一邊的寬度自由伸縮

主要還是用到屬性flex，固定寬度的那一邊將寬度設(shè)置為固定值，另一邊的flex值設(shè)為1，應(yīng)用下面的樣式來看看效果

.left{width: 100px; border-right: 1px solid darkgray;}.right{ flex: 1; }

這時如果改變箱子的寬度，我們會發(fā)現(xiàn)左邊的寬度會保持在100px，而右邊的寬度會隨著箱子寬度的改變而改變。

除了這些例子外，彈性布局還有很多很方便快捷的布局方式，主要多嘗試，熟練運用，應(yīng)對常規(guī)的網(wǎng)頁布局是綽綽有余。