### 彈性布局使用方式
相容性: 適合使用手機端 pc 直接方式(原因專案需要相容所有瀏覽器 ie10 以上可以考慮)
使用規則:
1: 找到父容器 給父容器設定display: flex
2: 一旦容器變為flex布局 主軸與交叉軸就會存在(你用不用或者都在那裡)
3: 確定主軸方向 flex-direction 預設水平方向 從左往右 決定 子元素水平方向排列
4: 在主軸上怎麼排列---- justify-content 決定 左對齊 右對齊 居中 元素之間距離相等對齊......
5: 看縱向是否有規律?
有: align-items 元素在豎直方向對齊方式 上對齊 下對齊 居中對齊 文字基線對齊
沒有: 但是有布局--> margin padding position
注意:
一般子元素在父容器中 不會內容溢位(只會變小)
前端彈性布局使用
為什麼需要彈性布局 傳統 display float position屬性,它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。flex 彈性布局誕生 1.flex direction，指定主軸是哪一根 row column 主軸方向 row reverse,column reverse 2....
彈性盒子 CSS3布局方式
1.彈性盒子 伸縮盒子 如果要使用彈性盒子屬性，首先要將父級元素變成彈性盒子 flex direction 設定伸縮盒子的內部元素的排列方式 row 從左到右安行排列 column 從上到下按照列排列 row reverse 從右到左按照行排列 column reverse 從下到上按照列排列 fl...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...