flexbox 布局最合適小規模布局，而網格布局適合較大規模布局。
float,clear,vertical-align 在flex中不起作用。
flex布局中，有兩類作用于父節點也子節點的樣式，大部分簡單的布局只要把父節點寫好了，子節點是沒有多大問題的。
display: flex /*宣告布局方式*/
flex-direction：row | column /*規定主軸的顯示方向*/
flex-wrap: nowrap | warp /*是否換行*/
justify-content: flex-start /*水平排列樣式*/
align-items: center /*垂直排列樣式*/
order：9 /*子節點的顯示順序*/
felx採用的是彈性布局，在宣告乙個元素的display屬性為flex的時候，瀏覽器在元素內計算兩天軸來，兩條方向軸根據flex-direction屬性的值決定是縱軸位主軸還是橫軸為主軸。我們只要設定到子節點的方向軸，就可以控制子節點的顯示方向。
舉個桔子：
<乙個div內有一段文字，要讓這段文字垂直居中，以往的寫法一般是這樣：div
class
="judgescomments"
>
<
div
class
="comments"
>個你滿分我都覺得不夠，可以的話，我希望能再給你10分！繼續努力，繼續加油！
div>
div>
.judgescomments.judgescomments>comments如果用flex寫：
.judgescomments.judgescomments>.comments黃色框中的文字就是使用flex布局做到的。
再舉個稍微複雜的桔子：
多列多行顯示的布局，應該怎麼設定呢？
html:(**第二層控制第三層的顯示方向；第三層控制第四層的顯示方向**)
<css樣式：div
class
="contentright"
>
<
div
class
="scoreright"
>
<
div
class
="judgeslist"
>
<
div
class
="judgescomments"
>
<
div
class
="comments"
>個你滿分我都覺得不夠，可以的話，我希望能再給你10分！繼續努力，繼續加油！
div>
div>
<
div
class
="judgesscore"
>92分
div>
div>
div>
/*可以很方便進行水平和垂直方向的，居左，居中，居右，兩邊對齊等效果。第一層樣式
*/.contentright
/*第二層樣式
*/.scoreright
/*第三層樣式
*/.scoreright > .judgeslist
/*下面是第四層樣式
*/.scoreright > .judgeslist> .judgeshead
/*垂直居中
*/.scoreright > .judgeslist> .judgescomments .scoreright > .judgeslist> .judgescomments >.comments .scoreright > .judgeslist> .judgesscore
如果要想讓其它瀏覽器支援，flex布局屬性，都需要加上瀏覽器字首。
彈性布局flex知識點
flex布局原理 通過給父盒子新增flex屬性來控制子盒子的位置和排列方式 常見父項屬性 flex direction row row reverse column column reverse flex wrap nowrap wrap wrap reverse flex flow flex di...
彈性布局flex知識點和常用點
justify content 彈性元素們在主軸上的對齊方式 align items 彈性元素們在側軸上的對齊方式 flex wrap 決定彈性元素溢位容器時的換行方式 align content 用於修改換行後 設定了flex wrap 在多 況下，行與行之間的對齊方式。order 規定了彈性子元...
flex布局知識點（阮一峰部落格）
任何乙個容器都可以指定為flex布局 行內元素也可以使用flex布局 設為flex布局以後，子元素的float,clear,vertical align屬性都將失效 flex容器的屬性 1 flex direction 2flex wrap 3flex flow 4justify content 5...