阮一峰的flex布局
flexible box：彈性布局，用來為盒狀模型提供最大的靈活性。
採用flex布局的元素成為flex容器，它的所有子元素稱為專案。
容器預設兩根軸：水平軸和垂直的交叉軸。
整個盒子寬度550px，1,2,3子盒子預設寬高都為100px，然後設定盒子1,2,3的flex-grow屬性如下：
.container div:nth-
child(1
).container div:nth-
child(2
).container div:nth-
child(3
)
將剩餘的寬度按照 0:1:3分配寬度：第乙個盒子還是保持預設設定寬度不變，第二個盒子 (原本寬度)100px+（分配的剩餘寬度）250*（1/(1+3)）px=162.5px； 同理第三個盒子變為：100+187.5=287.5px。
演算法：父盒子總寬度250px
第乙個：0不縮小還是100px；
第二個：1表示縮小1/4 三個元素水平排列(預設flex-shrink:0)溢位的長度：300-250px=50 100px-50*(1/4)=87.5px
第三個元素：100px-50*(3/4)=62.5px
footer section h4
我是文字
絕對定位與彈性布局相互矛盾，彈性布局對相對定位沒影響。
Flex布局 彈性布局 基礎入門
flex是flexble box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 他所有子元素自動成為容器成員，簡稱為 flex 專案 flex item 簡稱 專...
Flex彈性布局基礎屬性
彈性布局可以簡潔 完整 響應式的實現各種頁面布局。螢幕和瀏覽器視窗大小變化也可以靈活調整布局 指定伸縮元素沿著主軸或者側軸，按照一定比例分配額外的空間，調整伸縮元素的大小 指定伸縮元素沿著主軸或者側軸，把伸縮元素額外空間分配到伸縮元素之前 之後和之間 控制元素在頁面上的布局方向 指定如何將垂直於元素...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...