flex（彈性盒、伸縮盒）
是css中的又一種布局手段，它主要用來代替浮動來完成頁面的布局；flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變。
彈性容器：要使用彈性盒，必須先將乙個元素設定為彈性容器，我們通過display來設定彈性容器：
display：flex 設定為塊級彈性容器
display：inline-flex 設定為行內的彈性容器
彈性元素：彈性容器的子元素是彈性元素（彈性項），彈性元素可以同時是彈性容器。
flex-direction 指定容器中彈性元素的排列方式，可選值：
row：預設值，彈性元素在容器中水平排列（左向右）
row-reverse：彈性元素在容器中反向水平排列（右向左）
column：彈性元素縱向排列（自上向下）
column-reverse：彈性元素縱向排列（自下向上）
flex-grow 指定彈性元素的伸展的係數，當父元素有多餘的空間時，子元素如何伸展，父元素的剩餘空間，會按照比例進行分配，預設值為1。
flex-shrink 指定彈性元素的收縮係數，當父元素中的空間不足以容納所有的子元素時，如何對子元素進行收縮，預設值為1。
flex-wrap 設定彈性元素是否在彈性容器中自動換行，可選值：
nowrap：預設值，元素不會自動換行
wrap：元素沿著輔軸方向自動換行
wrap-reverse：元素沿著輔軸反方向換行
flex-flow wrap和direction的簡寫屬性，可以同時寫兩個屬性。
flex-basis 指定的是元素在主軸上的基礎長度，如果主軸是橫向的，則該值指定的就是元素的寬度，如果主軸是縱向的，則該值指定的就是元素的高度，可選值：
auto：預設值，表示參考元素自身的高度或寬度。
如果傳遞了乙個具體的數值，則以該值為準。
flex可以設定彈性元素的三個樣式，語法為：
flex 增長 縮減 基礎;
order決定彈性元素的排列順序，order：1,2,3·····
justify-content 如何分配主軸上的空白空間，可選值：
flex-start：元素沿著主軸起邊排列
flex-end：元素沿著主軸終邊排列
center：元素居中排列
space-around：空白分布到元素兩側
space-between：空白均勻分布到元素間
space-evenly：空白分布到元素的單側
align-items 元素在輔軸上如何對齊，設定元素間的關係，可選值：
stretch：預設值，將元素的長度設定為相同的值
flex-start：元素不會拉伸，沿著輔軸起邊對齊
flex-end：沿著輔軸終邊對齊
center：居中對齊
baseline：基線對齊
align-content 輔軸空白空間的分布
align-self：用來覆蓋當前彈性元素上的align-items
初學web彈性盒
彈性和模型的布局 display flex 是彈性盒模型的布局方式，他既可以適用於容器中，也可以適用於行內元素。是w3c提出的一種新的方案，可以簡便 完整 響應式的實現各種頁面布局。目前，他已經得到了所有瀏覽器的支援。ie9以上 1.display設定盒模型 2.justify content盒模型...
css學習筆記 彈性盒2
首先我們了解一下折行 flex wrap nowrap 預設 不折行，元素在同一行內顯示 warp 折行 warp reverse 會改變交叉軸方向後換行 注意第乙個盒子的位置 我們使用移動端布局來檢視，對於彈性盒，設定中pc和移動端效果相差不大 對於彈性容器而言，我們改變的是內部直接子元素的布局，...
Web前端學習筆記 內聯元素的盒模型
1 盒模型的分類 內容區 content 內邊距 padding 邊框 border 外邊距 margin 內容區 內聯元素不能設定width和height。內邊距 內聯元素可以設定水平方向的內邊距 內聯元素可以設定垂直方向的內邊距，但是不會影響頁面的布局。邊框 內聯元素可以設定邊框，但是垂直的邊框...