彈性盒子，為父容器指定為彈性盒子，設定display:flex，注意如果是webkit核心的，要加上字首-webkit，即是display:-webkit-flex;
如果是行內元素，設定為display:inline-flex;
父容器擁有的屬性：
1.flex-direction 決定盒子的主軸方向，預設自左向右是主軸，自上向下是縱軸。
flex-dericttion:row;主軸是自左向右
flex-deriction:row-reverse主軸是自右向左
flex-deriction:column 主軸是自上向下
flex-deriction:column 主軸是自下向上
2.flex-wrap 是否換行，預設是nowrap，不換行
flex-wrap:nowrap 不換行
flex-wrap:wrap 換行
flex-wrap:wrap-reverse 換行，第一行在下面，第二行在上面
3.justify-content 定義條目在主軸上的排列方式
justify-content:flex-start 預設 左對齊
justify-content:flex-end 右對齊
jusitify-content:center 居中
jusitify-content:space-between 兩端對齊
jusitify-content:space-around 每個條目的兩邊空隙相等
4.align-item 定義定義條目在縱軸上的排列方式
align-item:flex-start 頂部對齊
align-item:flex-end 底部對齊
align-item:center 居中對齊
align-item:strecth 如果條目不設定高度，則沾滿父容器的高度
align-item:baseline 以條目的第一行文字為基線對準
總結：上面列出的是常用的父容器屬性，設定主軸方向，條目對齊在主軸上的對齊方式，是否換行，條目在縱軸的對齊方式。
下面是給子容器設定的屬性：
1.order 子元素的排列先後，數字越小，越靠前
2.flex-grow 子元素的放大比例
3.flex-shrink 子元素的縮小比例
給子元素設定屬性常用的是這三個。
Flexbox彈性盒子
定義乙個flex box 伸縮盒布局 需要在乙個父級元素上使用display屬性的值 flex或inline flex。這個父級元素將成為flex container 伸縮容器 而它的所有子元素將變成flex item 伸縮項 使用flex值能將元素渲染成為乙個塊級容器，而使用inline flex...
彈性盒子（flex box）
flexbox在div下使用 1.display flex none block inline flex 設定為彈性盒子 2.flex wrap wrap nowrap 可折疊 3.flex direction 彈性盒子排列方向 row橫向排列 row reverse由右向左 column縱向向下，...
flexbox彈性盒子布局
1.混合劃分 flex 1 flex 1 flex 2 我只有100px 不定寬高，水平垂直居中 2.方法1 可實現螢幕的水平垂直居中 不定寬高的水平垂直居中hhhhhhhhhhhh 方法1方法2 似乎不可實現螢幕的水平垂直居中，只能實現某個容器內的水平垂直居中 容器最好是有寬高 相容性1，ios可...