當我第一次接觸flex布局的時候，那時候我還是單純靦腆的乙個少年。那時候要寫乙個移動端的靜態頁面，我還在快樂的定位與浮動布局**，頁面裡面有乙個絕命九宮格，這怎麼寫，難道乙個乙個定位嗎？這不符合我懶人程式設計師的準則，在腦海裡依稀想到了flex布局這麼一回事，我好像有了一些印象。
選擇定位模式來編寫： 思路呢：
class='father'>
class="child">
div>
class="child">
div>
class="child">
div>
class="child">
div>
class="child">
div>
class="child">
div>
class="child">
div>
class="child">
div>
class="child">
div>
div>
複製**
.father
.father
.child
複製**
.child
.one
以此類推，計算你設計圖上每個盒子的左上角距離父盒子左上角的位置，
來設定top與left值
複製**
選擇flex布局 html結構還是一樣的，
.father
.father
.child
複製**
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
複製**
講道理主軸能有幾個方向？
當然就是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
複製**
改變下對齊方式（父元素彈性容器屬性）
justify-content 、 align-content 幫助我實現乙個真正的九宮格。
忘記正常布局的想法，我們距離自己的目標還差什麼內容？
主軸方向位置不對。（主軸上挨上了）
交叉軸上位置不對。（交叉軸距離還有點近）
所以justify-content 、 align-content 就是幫助我們對主軸與交叉軸的元素之間距離的。 我們需要的讓主軸上面怎麼排列？
每個元素之間的距離相等、最好外側元素與邊框距離與元素之間距離相等。
有沒有這樣的屬性呢？當然有 space-around 讓每個元素周圍分配相同的空間 主軸與交叉軸都選擇這樣的方式。就可以了。
乙個長相還不錯的靜態九宮格就寫好了
彈性布局除去正常的寬高顏色設定只需要4行**就完成乙個九宮格的書寫。而且完全不需要計算。是不是簡單明瞭呢。
這一期只是初體驗咯，下期就要把九宮格變成乙個長得很像**的九宮格還可以動的九宮格。
九宮格布局
2009 08 25 15 15 27 九宮格是一種比較古老的設計，它最基本的表現其實就像是乙個三行三列的 其實它最初是在window的c s結構中用得比較多，比如我們經常看 到軟體中的乙個窗體，其實就是乙個九宮格的典型應用，因為窗體需要在八個方向拉伸，所以在c s軟體中大量採用這種技術來布局設計。...
九宮格問題
include include stl 雙端佇列容器 include include pos.h using namespace std ofstream fout sudoku.txt deque d int lay deque d int checkout pos p,int n int sud...
九宮格排布
在我們設定ui時，肯定會遇到設定九宮格的效果 如上圖所示，我們如何讓展示出來哪？首先我們會發現 每行的的 y 值是一樣的 行數決定 y 值 每列的的 x 值是一樣的 列數決定 x 值 綜上所述 我們只要知道每張的 行數 和 列數 那麼，它的座標自然就肯定了 我們怎樣確定 行數 和 列數那？我們發現 ...