flex布局優缺點
布局簡單，移動端使用較廣
pc端支援較差，ie11或更低版本不支援
flex布局原理
flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。
當我們為父盒子設為 flex 布局以後，子元素的 float、clear 和 vertical-align 屬性將失效。
flex布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局
採用 flex 布局的元素，稱為 flex 容器(flex container)，簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案(flex
item)，簡稱"專案"。
總結：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式
父項常見屬性
flex-direction：設定主軸的方向
justify-content：設定主軸上的子元素排列方式
flex-wrap：設定子元素是否換行
align-content：設定側軸上的子元素的排列方式(多行)
align-items：設定側軸上的子元素排列方式(單行)
flex-flow：復合屬性，相當於同時設定了 flex-direction 和 flex-wrap
flex-direction：設定主軸的方向
預設主軸方向為x軸正方向，子元素根據主軸排列
justify-content：設定主軸上的子元素排列方式
區別：不管怎樣子元素都是按照主軸的方向依次排列
flex-wrap設定是否換行
我們在傳統布局中學到，就是設定浮動的元素如果父級裝不下就會另起一行，但是flex不會，他會修改子元素的寬度讓其在一行上顯示。
預設情況下，專案都排在一條線(又稱」軸線」)上。flex-wrap屬性定義，flex布局中預設是不換行的。
nowrap 不換行
wrap 換行
align-items 設定側軸上的子元素排列方式(單行 )
該屬性是控制子項在側軸(預設是y軸)上的排列方式 在子項為單項(單行)的時候使用
flex-start 從頭部開始
flex-end 從尾部開始
center 居中顯示
stretch 拉伸：高度跟父親一樣寬，但是子元素不要設定寬度
align-content 設定側軸上的子元素的排列方式(多行)
設定子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況(多行)，在單行下是沒有效果的。
align-content 和align-items區別
align-items 適用於單**況下， 只有上對齊、下對齊、居中和 拉伸
align-content適應於換行(多行)的情況下(單**況下無效)， 可以設定 上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值。
總結就是單行找align-items 多行找 align-content
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex-flow:row wrap;
flex布局子項常見屬性
flex子專案佔的份數
align-self控制子項自己在側軸的排列方式
order屬性定義子項的排列順序(前後順序)
flex 屬性
flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
.item {
flex: ; /* 預設值 0 */
align-self控制子項自己在側軸上的排列方式
align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。
預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。
span:nth-child(2) {
/* 設定自己在側軸上的排列方式 */
align-self: flex-end;
order 屬性定義專案的排列順序
數值越小，排列越靠前，預設為0，可以為負數。
注意：和 z-index 不一樣。
.item {
order: ;
設定側軸上子元素排列方式 flex布局
常見父項屬性 1 flex direction 設定主軸方向，預設為x軸 屬性值 row 從左到右，x軸 預設 row reverse 從右到左 column 從上到下 column reverse 從下到上 2 justify content 設定主軸上的子元素排列方式 屬性值 flex star...
設定側軸上子元素排列方式 移動端常見布局
6.1流式布局 百分比布局 流式布局就是百分比布局，也稱非固定畫素布局。通過盒子寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素限制，內容向兩側填充。流式布局方式是移動web開發使用的比較常見的布局方式 max width 最大寬度 max height 最大高度 min width 最小寬...
子元素上的margin作用到了父元素上
margin外邊距合併詳解 以上 的初衷是讓子元素的頂部距離父元素30px，但是事實上卻並沒有實現預 期的效果，而是子元素頂部緊貼父元素，並且margin top好像轉移給了父元素，讓父元素產生上外邊距。這其實是乙個典型的外邊距合併問題，但是並非 所有的瀏覽器都會產生這種情況，一般標準瀏覽器都會出現...