flex布局初體驗

當我第一次接觸flex布局的時候，那時候我還是單純靦腆的一個少年。那時候要寫一個移動端的靜態頁面，我還在快樂的定位與浮動布局大法，頁面里面有一個絕命九宮格，這怎么寫，難道一個一個定位嗎？這不符合我懶人程序員的準則，在腦海里依稀想到了flex布局這么一回事，我好像有了一些印象。

九宮格事件

選擇定位模式來編寫： 思路呢：

<div class='father'><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div></div> 復制代碼.father{position : relative;width : 500px;height : 500px; } .father .child{positon : absolute;width : 120px;height : 120px; } 復制代碼

這個時候大家可以想象一下現在的狀況。 一個500*500的父盒子，左上角上排列9個120px盒子疊起來，剩下的任務是什么？按照每個盒子應該在的位置去進行定位。

.child.one{top : xxx,left : xxx } 以此類推，計算你設計圖上每個盒子的左上角距離父盒子左上角的位置，來設定top與left值 復制代碼

我得寫多少重復樣式代碼啊，饒了我吧，有沒有別的方法，我好像找到了寫雪碧圖的感覺。

突然變懶

選擇flex布局 html結構還是一樣的，

.father{width: 500px;height: 500px;box-sizing: border-box;padding: 20px;display: flex;background: #eee;flex-wrap : wrap;justify-content : space-around;align-content: space-around;}.father .child{width: 120px;height: 120px;background: bisque;} 復制代碼

然后我們就完成了一個九宮格。。。。 算上顏色和一些padding，還有box-sizing，以及盒子的大小與背景設置，真正起作用的代碼就這么四行

display: flex; flex-wrap : wrap; justify-content : space-around; align-content: space-around; 復制代碼

九宮格出來了 我們要去慢慢剖析這些屬性，

根據MDN的解釋 display:flex，可以把一個盒子變成flex容器，內部的子元素變成flex item，這些子元素會彈性展示。

首先：我們把父元素變成一個彈性盒模型，父元素內部的所有子元素就是flex item，去彈性展示。 這個彈性展示非常重要，我們接下來的布局，就和正常的布局完全不同了。

在彈性布局中，我們在使用屬性之前一定要注意這個屬性是作用在父元素（容器）的還是子元素（flex-item）的。

回到九宮格： 首先我們把父元素設置成display : flex之后所有的盒子都排在一行了。

這是為什么？

當我們把父元素變成彈性盒模型之后，內部元素就不再是獨占一行的塊級元素、不去換行的行內元素的布局方式了。而是變成一種根據兩個軸線去決定布局的方式了，

主軸與交叉軸（父元素彈性容器的屬性）

默認值：flex-direction : row 復制代碼

彈性布局這會讓你的子元素呈線形排列，在彈性容器內的flex-item都將排在一行內，如果放不小了就去想辦法縮小自己。 這個線形排列的方向就是主軸的方向。

講道理主軸能有幾個方向？

當然就是4個方向了，

1.從左到右 : flex-direction : row 這是默認值

2.從右到左 : flex-direction : row-reverse

3.從上到下 : flex-direction : column

4.從下到上 : flex-direction : column-reverse

按照方向來看，目前主軸是不需要更改方向的，

交叉軸呢 就是垂直于主軸咯（真簡略）

但是最大的問題是他不換行啊。。。

單行與多行顯示（父元素彈性容器）

flex-wrap 可以指定flex元素是單行顯示還是多行顯示。

多行顯示的話，堆疊方式也是可以控制的。

默認值當然是單行顯示了

flex-wrap : nowrap 復制代碼

如果我們把九宮格變成多行展示的會是怎么樣啊？

flex-wrap : wrap 復制代碼

換行了！！！！ 這個看起來就有點九宮格的雛形了。 之前說的堆疊方式是什么意思？flex-wrap可以多行的兩個屬性，當你看到reverse你就應該知道這和方向肯定有點關系

flex-wrap : wrap flex-wrap : wrap-reverse 復制代碼

如果主軸是橫向的，那么wrap就像圖中一樣，456會排在123下面，向下換行。 wrap-reverse呢？456 就會在 123上面了。

。

改變下對齊方式（父元素彈性容器屬性）

justify-content 、 align-content 幫助我實現一個真正的九宮格。

忘記正常布局的想法，我們距離自己的目標還差什么內容？

主軸方向位置不對。（主軸上挨上了）

交叉軸上位置不對。（交叉軸距離還有點近）

所以justify-content 、 align-content 就是幫助我們對主軸與交叉軸的元素之間距離的。 我們需要的讓主軸上面怎么排列？

每個元素之間的距離相等、最好外側元素與邊框距離與元素之間距離相等。

有沒有這樣的屬性呢？當然有 space-around 讓每個元素周圍分配相同的空間 主軸與交叉軸都選擇這樣的方式。就可以了。

一個長相還不錯的靜態九宮格就寫好了

彈性布局除去正常的寬高顏色設定只需要4行代碼就完成一個九宮格的書寫。而且完全不需要計算。是不是簡單明了呢。

這一期只是初體驗咯，下期就要把九宮格變成一個長得很像抽獎的九宮格還可以動的九宮格。

我是一個應屆生，最近和朋友們維護了一個公眾號，內容是我們在從應屆生過渡到開發這一路所踩過的坑，以及我們一步步學習的記錄，如果感興趣的朋友可以關注一下，一同加油~

總結

以上是生活随笔為你收集整理的写个九宫格的初体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。