前言：這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！
css3引入了一種新的布局模型—— flex 布局。flex是 flexible box 的縮寫，一般稱之為彈性盒模型。flex布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸的螢幕。
使用 flex 布局以後，需要注意 float、clear 和 vertical-align 屬性在伸縮專案上沒有效果。
有以下6個屬性作用在伸縮容器上：
flex-direction
主軸的方向（即專案的排列方向）
flex-wrap
如果一條軸線排不下，如何換行
flex-flow
屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，預設值為 row nowrap 。
justify-content
伸縮專案在主軸上的對齊方式
align-items
伸縮專案在側軸上的對齊方式
align-content
堆疊伸縮行
有以下6個屬性設定在伸縮專案上
order
屬性定義伸縮專案的排列順序。數值越小，排列越靠前，預設為0。
flex-grow
屬性定義伸縮專案的放大比例，預設為 0，即如果存在剩餘空間，也不放大。
如果所有伸縮專案的 flex-grow 屬性都為 1，則它們將等分剩餘空間（如果有的話）。
如果乙個伸縮專案的 flex-grow 屬性為 2，其他專案都為 1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink
屬性定義了伸縮專案的縮小比例，預設為 1，即如果空間不足，該專案將縮小。
如果所有伸縮專案的 flex-shrink 屬性都為 1，當空間不足時，都將等比例縮小。
如果乙個伸縮專案的 flex-shrink 屬性為 0，其他伸縮專案都為 1，則空間不足時，前者不縮小。
flex-basis
屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為 auto，即專案的本來大小。
flex
屬性是 flex-grow、flex-shrink 和 flex-basis 的簡寫，預設值為 0 1 auto 。後兩個屬性可選。
該屬性有兩個快捷值： auto (1 1 auto) 和 none (0 0 auto) 。
align-self
屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋容器的 align-items 屬性。預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch (充滿整個容器)。
CSS 彈性盒子Flex
剛接觸flex三天，特總結並記錄一下。flex感覺就是排版布局的神器。好吧剛接觸前端，原諒我一次孤陋寡聞 參考文章 要使用flex布局，需要設計到兩層，外面一層叫做flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案...
Flex布局（CSS彈性盒子）
css3彈性盒子 flexible box或flexbox 是一種用於在頁面上布置元素的布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。摘自mdn 使用...
flex彈性盒子
垂直居中 傳統 絕對定位 flex flexible box 彈性盒子。可以輕鬆控制元素的排列，對齊和順序。宣告定義 使用display flex或display inline flex 宣告乙個容器為彈性盒子。這個容器中的子元素們，會遵循彈性布局。注 一般是使用display flex.inlin...