flex佈局相信大家已經不陌生了，越來越多的人在開發中使用flex進行自適應的佈局。但是呢，有些flex的屬性代表什麼意思你真的瞭解嗎？下面我就着重說一說不常用的flex屬性吧（可能只是我個人不常用 (⊙﹏⊙)）
包含元素設置display: inline-flex
顧名思義包含元素即包含inline的特性也包含flex的特性：
inline-flex:
flex:
aline-items： baseline/flex-start/flex-end
常用的center就不多說了，flex-start是以父元素頂部對齊 flex-end是以父元素底部對齊，baseline是以各個元素的文字的基線對齊
flex-start:
flex-end:
base-line:(仔細觀察文字的對齊，基於文字的底線對齊)
justify-content：space-between、space-around、space-evenly
常用的center就不說了， space-between爲各個子元素之間的左右間距平分剩餘空間，space-around在space-between基礎上增加了首尾元素與父元素邊界的間距，space-evenly與space-around基本一致，區別是與父元素邊界間距的大小不一致（具體看圖）；
space-between:
space-around:
space-evenly:
flex-direction: row、row-reverse、column、column-reserve
flex-wrap:wrap、 nowrap、wrap-reserve
flex-flow: flex-direction和flex-wrap的複合寫法
以上屬性比較常用我就不上圖了
子元素設置屬性：
order：根據數值的大小判斷子元素的排列順序
flex-grow：當父元素有剩餘空間時，子元素佔據剩餘空間的量，即擴張的量（0表示不做擴張）
flex-shrink：當父元素的空間不足以展示所有的子元素，並且父元素沒有設置flex-wrap爲wrap或wrap-reserve時，子元素需要進行收縮的量（1表示和其他元素的收縮量一致，即默認爲1）
flex-basis：表示該子元素的初始寬度，當沒有flex-shrink和flex-grow屬性影響時(沒有設置這兩個屬性，或者設置爲了默認值)，設置了該屬性後瀏覽器會計算flex-basis屬性值和兄弟元素的寬度的比例，按照這個比例進行寬度的變化。當然，如果設置的最小或者最大寬度的話 這個屬性就失效了。（設置寬度無效）
上圖應該比較好理解：
我設置的屬性是：
flex(複合屬性)：這個是我們平時比較常用的屬性，但是很少會有人瞭解他是哪幾種屬性的複合。實際上他是：flex-grow flex-shrink flex-basis三個屬性的複合寫法。根據flex屬性的寫法，瀏覽器會解析爲不同的屬性：
flex:2; 這個屬性的展開形式爲：flex-grow:2 & flex-shrink: 1 & flex-basis: 0%;
flex:1 2; 這個屬性的展開形式爲：flex-grow:1 & flex-shrink: 2 & flex-basis: 0%;
flex: 2 20px; 這個屬性的展開形式爲： flex-grow: 2 & flex-shrink: 1; & flex-basis: 20px;
flex: 20px; 這個屬性的展開形式爲： flex-grow: 0 & flex-shrink: 1; & flex-basis: 20px;
align-self：給子元素單獨設置對齊的方式，這個屬性會覆蓋父元素設置的align-items屬性
以上就是我最近整理出來的一些關於flex佈局相關屬性的內容，各個屬性自己也有在瀏覽器上進行實際的測試，希望對各位更進一步瞭解flex有所幫助