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

首先在我們?cè)谄聊簧梢粋€(gè)寬300px，高200px的DIV作為容器，通過(guò)display: flex屬性，可將該DIV聲明為塊級(jí)彈性容器

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

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

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

將球放進(jìn)容器里

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

左上角第一個(gè)為序號(hào)1，以此類推

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

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

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

在了解了彈性布局后我們來(lái)看看實(shí)際項(xiàng)目中有哪些地方可以用到彈性布局來(lái)快速解決問(wèn)題

完全居中對(duì)齊

有時(shí)我們想在一個(gè)格子內(nèi)顯示的文本或圖片要水平和垂直方向都是居中對(duì)齊的，就是顯示在格子的正中央，使用彈性布局的水平和垂直方向都是居中對(duì)齊即可。本文中上例的球體內(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個(gè)菜單每個(gè)菜單的flex值都是1，可以理解為每個(gè)菜單的寬度是1/5，于是就可以平均分配寬度了。把flex的值設(shè)置為2也可以，只要每個(gè)菜單的值一樣，它們的寬度就是一樣的。所以如果把【首頁(yè)】的flex值設(shè)置為2，其它菜單的flex值設(shè)置為1，相當(dāng)于把箱子的寬度平均分為6份，【首頁(yè)】占了2/6，其他的占了1/6,即首頁(yè)的寬度是其它菜單寬度的2倍。

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

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

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

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

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