一蹲坷，概念
采用Flex布局的元素浦夷，稱為Flex容器（flex container），簡(jiǎn)稱”容器”喊暖。它的所有子元素自動(dòng)成為容器成員惫企，稱為Flex項(xiàng)目（flex item），簡(jiǎn)稱”項(xiàng)目”陵叽。
二狞尔，容器屬性
1，項(xiàng)目排列方向：
flex-direction: row | row-reverse | column | column-reverse;
row（默認(rèn)值）：主軸為水平方向巩掺，起點(diǎn)在左端偏序。
row-reverse：主軸為水平方向，起點(diǎn)在右端胖替。
column：主軸為垂直方向研儒，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向独令，起點(diǎn)在下沿端朵。
2，一條線排不下是否換行
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默認(rèn)）：不換行燃箭。
wrap：換行冲呢，第一行在上方。
wrap-reverse：換行招狸，第一行在下方敬拓。
3邻薯，項(xiàng)目在主軸上的對(duì)齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等恩尾。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等弛说。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍翰意。
4木人，項(xiàng)目在交叉軸的對(duì)齊方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊冀偶。
center：交叉軸的中點(diǎn)對(duì)齊醒第。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto进鸠，將占滿整個(gè)容器的高度稠曼。
三，項(xiàng)目的屬性
1客年，項(xiàng)目的排列順序
order：0 | 1;
0（默認(rèn)）：不包括該項(xiàng)目其他項(xiàng)目排序霞幅；
1：包括該項(xiàng)目所有項(xiàng)目排序；
2量瓜，定義項(xiàng)目的放大比例
flex-grow：number司恳；
0（默認(rèn)）：即如果存在剩余空間，也不放大
如果所有項(xiàng)目的flex-grow屬性都為1绍傲，則它們將等分剩余空間（如果有的話）扔傅。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1烫饼，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍猎塞。
3,項(xiàng)目的縮小比例
flex-shrink: number;
默認(rèn)為1，即如果空間不足杠纵，該項(xiàng)目將縮小
如果所有項(xiàng)目的flex-shrink屬性都為1荠耽，當(dāng)空間不足時(shí)，都將等比例縮小淡诗。如果一個(gè)項(xiàng)目的flex-shrink屬性為0骇塘，其他項(xiàng)目都為1，則空間不足時(shí)韩容，前者不縮小。
負(fù)值對(duì)該屬性無效唐瀑。
4,在分配多余空間之前群凶，項(xiàng)目占據(jù)的主軸空間
flex-basis
5,允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性
align-self