Flex布局
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成逗余。彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器魁亦。彈性容器內包含了一個或多個彈性子元素牛郑。
flex-direction屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）
row：橫向從左到右排列（左對齊），默認的排列方式签财。
row-reverse:反轉橫向排列（右對齊串慰，從后往前排，最后一項排在最前面
column：縱向排列
column-reverse：反轉縱向排列唱蒸，從后往前排邦鲫，最后一項排在最上面。
justify-content 屬性
內容對齊（justify-content）屬性應用在彈性容器上油宜，把彈性項沿著彈性容器的主軸線（main axis）對齊。
flex-start：(默認值)?左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊怜姿，項目之間的間隔相等
space-around：彈性項目平均分布在該行上慎冤，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項沧卢，則該值等同于center蚁堤。否則，彈性項目沿該行分布但狭，且彼此間隔相等（比如是20px）披诗，同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）撬即。
align-items 屬性
align-items?設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界呈队。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界剥槐。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸宪摧，則會向兩個方向溢出相同的長度）粒竖。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效几于。其它情況下蕊苗，該值將參與基線對齊。
stretch：如果項目未設置高度或設置為auto沿彭，將占滿整個容器的高度
flex-wrap 屬性
flex-wrap?屬性用于指定彈性盒子的子元素換行方式。
nowrap?- 默認饱搏， 彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap?- 彈性容器為多行课舍。該情況下彈性子項溢出的部分會被放置到新行捡需，子項內部會發(fā)生斷行
wrap-reverse?-反轉 wrap 排列殊霞。
align-content 屬性
align-content?屬性用于修改?flex-wrap?屬性的行為瘸右。類似于?align-items, 但它不是設置彈性子元素的對齊盹沈，而是設置各個行的對齊肃晚。定義多根軸線的對齊方式晋修，如果項目只有一根，那么該屬性不起作用墓卦。
stretch?- 默認倦春。各行將會伸展以占用剩余的空間。
flex-start?- 各行向彈性盒容器的起始位置堆疊落剪。
flex-end?- 各行向彈性盒容器的結束位置堆疊睁本。
center?-各行向彈性盒容器的中間位置堆疊。
space-between?-各行在彈性盒容器中平均分布忠怖。
space-around?- 各行在彈性盒容器中平均分布呢堰，兩端保留子元素與子元素之間間距大小的一半。
order?屬性設置彈性容器內彈性子元素的屬性:
整數值來定義排列順序脑又，數值小的排在前面暮胧。可以為負值
設置了?margin-right: auto;?问麸。 它將剩余的空間放置在元素的右側：
margin: auto;?可以使得彈性子元素在兩上軸方向上完全居中:
練習：
