Flexbox屬性分成兩個組：flex容器和flex項目殊橙。Flex布局主要有父容器和它的直接子元素組成，其中父容器被稱之為flex容器，而其直接的子元素稱作為flex項目蛀柴。這屬性只要設(shè)置在父容器上螃概，其所有子元素將自動成為Flex項目鸽疾。設(shè)為Flex布局以后，子元素的float
冒窍、clear和vertical-align屬性將失效综液。
flex等比劃分
這里父容器設(shè)置-webkit-flex,第一個子元素flex設(shè)置1，第二個子元素flex設(shè)置2桩了，那么子元素1占據(jù)的空間就是1/（1+2）蕉扮，子元素2所占空間就是2/（1+2）
flex混合劃分
子元素1是一個固定大小的元素喳钟，其他兩個子元素為固定比例的元素
子元素1寬度為50px排列，其他兩個元素依舊是2:1排列
使用flex等比劃分不需要考慮寬度的大小易茬，子元素會自動填充剩余的空間疾呻，根據(jù)屏幕的寬度大小自動拉伸相應(yīng)比例
父類元素-webkit-flex 左右子元素width：150px 中間元素flex：1
flex-direction屬性
父類元素flex 默認排版是從左到右排列 使用flex-direction：row（默認排版方向）屬性 讓子元素從左向右水平排列
flex-direction：row-reverse叠蝇；使子元素從右向左水平排列
flex-direction:column; 使元素從上往下垂直排列
flex-direction:column-reverse; 使元素從下往上垂直排列
flex-wrap屬性
-webkit-flex-wrap:nowrap;(默認屬性值)，當(dāng)父元素的值等于400px犁柜，子元素的值之和大于了父元素的寬度值馋缅，子元素并不會發(fā)生換行萤悴，這里的flex：3 并沒有因為超出父元素而換行
-webkit-flex-wrap:wrap;當(dāng)子元素大小超出父元素時自動換行
-webkit-flex-wrap:wrap-reverse;子元素超出父元素自動換行并且逆方向排列
justify-content屬性
justify-content：flex-start（默認值）;（如同float：left）使得子元素的排版由左向右排列
justify-content：flex-end;（如同float：right）使得子元素的排列由右向左排列
justify-content:center;使子元素居中（水平居中）
justify-content:space-between;使子元素兩端對齊 子元素之間的間隔都相等
justify-content：space-around柳沙；使子元素兩邊留出的空隙相同
align-self屬性 此屬性默認為縱向排列子元素赂鲤，父類元素display：flex数初；子元素設(shè)置align-self屬性控制所屬方向
align-self：auto（默認屬性）等同于stretch泡孩，在沒有設(shè)置高度height的時候仑鸥，子元素設(shè)置auto或stretch的高度自動填充
align-self：baseline眼俊；子元素的高度拉伸是根據(jù)文字的基線進行拉伸
父元素
align-items：flex-start；使所有子元素排列在上方
align-items：flex-center澎灸；使所有子元素垂直居中
align-items：flex-end拦止；使所有子元素排列在下方
父元素設(shè)置align-items：stretch创泄；子元素如果設(shè)置了高度那么此元素高度無變化鞠抑，子元素設(shè)置了min-height：50px搁拙；即高度大于50px那么高度自動填充箕速，子元素設(shè)置了max-height：300px盐茎；那么高度為300px徙赢。
align-content屬性和align-items屬性很相似
align-items：flex-start窑业；換行存在很大的空隙
align-content：flex-start常柄；
align-content：flex-end西潘；
align-content：center喷市；
align-content：space-between；
align-content：space-around缭黔；
order屬性是定義項目的前后順序 馏谨，order的屬性值越小項目越靠前附迷，默認數(shù)值為0
