1. 布局概念
最傳統、原始的web布局設計。網頁最外層容器(outer)有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。
2. 優點
採用的是css2之前的寫法,不存在瀏覽器相容性。布局簡單。
3. 缺點
但是移動端不可以使用pc端的頁面,兩個頁面的布局不一致,移動端需要自己另外設計乙個布局並使用不同網域名稱呈現。
4. 實現方法
pc端:移動端舒服！
再看一下最近比較'火'的京東的案例:分別訪問
可以發現:
pc端限制了最小的寬度, 低於了則以最小寬度出現滾動條
移動端限制了最大的寬度, 超過了則以最大寬度居中顯示
1. 布局概念
流式布局也叫百分比布局
這邊引入一下自適應布局:
分別為不同的螢幕設定布局格式，當螢幕大小改變時，會出現不同的布局，意思就是在這個螢幕下這個元素塊在這個地方，但是在那個螢幕下，這個元素塊又會出現在那個地方。只是布局改變，元素不變。可以看成是不同螢幕下由多個靜態布局組成的。
而流式布局的特點是隨著螢幕的改變，頁面的布局沒有發生大的變化，可以進行適配調整，這個正好與自適應布局相補。
流式布局常用的設計模板:
左側固定+右側自適應
左右固定寬度+中間自適應(參考京東手機版)
頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示 。 你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。
2. 優點
元素的寬高用百分比做單位，元素寬高按螢幕解析度調整，布局不發生變化
3. 缺點
螢幕尺度跨度過大的情況下，頁面不能正常顯示。
1. 布局概念
彈性布局是css3引入的強大的布局方式，用來替代以前web開發人員使 的一些複雜易錯的hacks方法(如float實現流式布局)。
2. 優點
簡單、方便、快速
3. 缺點
css3新特性,瀏覽器相容性非常頭疼。而且手機瀏覽器對flex的支援也不是很理想。
4. 實現方法
flex-flow:||
flex-direction和flex-wrap的簡寫,在兩者選其一。
flex-direction:row（初始值） | row-reverse | column | column-reverse
flex-direction定義了彈性專案在彈性容器中的放置方向，預設是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。
row:主軸為水平方向，專案沿主軸從左至右排列
column：主軸為豎直方向，專案沿主軸從上至下排列
row-reverse：主軸水平，專案從右至左排列，與row反向
column-reverse：主軸豎直，專案從下至上排列，與column反向
flex-wrap:nowrap（初始值） | wrap | wrap-reverse
flex-wrap定義是否需要拆行以使得彈性專案能被容器包含。*-reverse代表相反的方向。
nowrap：自動縮小專案，不換行
wrap：換行，且第一行在上方
wrap-reverse：換行，第一行在下面
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式
自適應布局（adaptive）的特點是分別為不同的螢幕解析度定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨視窗大小的調整發生變化。 你可以把自適應布局看作是靜態布局的乙個系列。 就是說你看到的頁面，裡面元素的位置會變化而大小不會變化。
四、響應式布局(responsive layout)
採用自適應布局和流式布局的綜合方式，為不同螢幕解析度範圍建立流式布局
現在優秀的頁面都追求一套**可以實現三端的瀏覽;
從概念可以看出來,自適應布局的誕生是為了實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。
利用**查詢可以檢測到螢幕的尺寸(主要檢測寬度)，並設定不同的css樣式，就可以實現響應式的布局。
大名鼎鼎的bootstrap就是響應式布局的專家。
官方放出狠話:
bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。
連我們最熱愛的react官方也熱衷於響應式布局設計:
《react官方**》
手機端下的react頁面:
以上四種就是常用的前端布局方案啦，布局並不唯一。靈活應用就能構建出優秀的**
flex布局簡單總結
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。注意 屬性名屬性值 備註display flex 定義了乙個flex容器，它的直接子元素會接受這個flex環境 flex direction row,row reverse,column,column r...
Flex布局簡單總結
複習到flex，總結一下方便檢視 以下6個屬性設定在容器上。屬性描述 值flex direction 決定主軸的方向 即專案的排列方向 row 預設值 row reverse column column reverse flex wrap 定義如何換行。nowrap 預設值 wrap wrap re...
Flex布局常用屬性簡單總結
常用布局方式也就是float，但flex布局更適合移動端專案開發 參考flex布局 1，布局方式 display flex display webkit flex safari a.橫向縱向布局 flex direction row column row reverse row reverse b....