#一 布局幾種方式
1.靜態(自然)布局(沒有任何(float,position等)修飾的布局)#彈性布局2.浮動布局(float)
3.定位布局(position)
4.彈性布局(flex)
5.柵格布局(就是把網頁的寬度分成固定的相同寬度,然後列出各種可能的組合,以便頁面在進行呈現時能夠進行快速的布局,通常12等分或24等分)
概念:是css3的彈性盒子(flexible box)或flexbox,是一種布局方式,當頁面需要適應不同螢幕大小或裝置型別時,他會確保擁有恰當的布局方式.#原理
彈性布局是通過調整其內元素的寬高,從而在任何顯示裝置對可用的顯示空間的最佳填充能力.
#名稱解釋
##軸(axis)
每個彈性框布局都包含兩個軸,彈性專案(子級元素)延其依次排列的的水平軸稱之為主軸(水平線),#尺寸(dimension)垂直於主軸的稱之為側重(垂直線)
根據彈性容器的主軸側軸,彈性專案的寬高,對應的主軸的稱之為主軸尺寸(寬),對應側軸的稱之為側軸尺寸(高)
#定義乙個彈性布局
display:flex;注意:使用彈性布局後,子元素的float,clear和vertical-align將失效.值flex使彈性容器成為乙個塊級元素,定義在父級上
display:inline-flex;
值inline-flex使彈性容器成為行內元素.定義在父級上.
display:none;
#flex屬性分類
##1.容器屬性(作用於父級上)
###a.flex-direction
這個屬性決定了主軸(水平)的方向(專案的排列方向)##2.專案(子級)屬性(屬性寫在子級元素上)###b.flex-wrap
預設情況下,專案排在一行,可以通過這個屬性設定來決定子級元素是否換行顯示
###c.flex-flow
該屬性是flex-direction和flex-wrap屬性的簡寫
###d.justity-content
定義了專案(子級)在主軸(水平)方向上的對齊方式
###e.align-items
定義了專案(子級元素)在交叉軸上的對齊方式
###f.align-content
定義了多根軸的對齊方式,如果只有一根軸線該屬性不起作用
###a.order
定義了專案(子級)的排列順序,數值越小排列越前,值可正可負###e.flex###b.flex-grow
定義了專案(子級元素)的放大比例,預設是0,如果空間不夠,該專案不放大
###c.flex-shrink
定義了專案的縮小比例,預設1,如果空間不夠,該專案自動縮小.
###d.flex-basis
該屬性會計算主軸是否有多餘空間
是flex-grow,flex-shrink和flex-basis的簡寫,也就是他們的復合寫法#具體演示###f.align-self
該屬性允許單個專案有與其他專案不一樣的對齊方式,預設值auto,表示父級元素的align-items屬性,沒如果沒有父級,則等同於stretch
一 容器屬性flex-direction屬性演示
###html**
flex-direction屬性
flex-direction屬性決定主軸的方向（即專案的排列方向）。
.box
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
##css樣式
.box1
.box1 li
#box1
#box2
#box3
#box4
知識點滴 HTML5 布局總結
布局總結 1 像這樣的行內標記，定義它的margin top和margin bottom是無效的，除非你把它設定為塊狀元素才可以。display block 2 對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，3 無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的...
HTML5 布局篇 總結
1 像這樣的行內標記，定義它的margin top和margin bottom是無效的，除非你把它設定為塊狀元素才可以。display block 2 對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，3 無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的盒模型結構...
html5 伸縮布局
基本概念 1 主軸 flex容器的主軸主要用來配置flex專案，預設是水平方向 2 側軸 與主軸垂直的軸稱作側軸，預設是垂直方向的 3 方向 預設主軸從左向右，側軸預設從上到下 4 主軸和側軸並不是固定不變的，通過flex direction可以互換 display flex 給父盒子加flex屬性...