最近在開發公司的平台系統，因為該項目主要是運行在移動端，所以采用了flex彈性布局。flex布局用起來很靈話，提高了開發效率。而且性能貌似比傳統的浮動布局好。
1. 首先聲明父元素布局方式為彈性布局
display: -webkit-flex; /* Safari */
display:flex;
2.然后設置橫向主軸子元素排列方式
justify-content:flex-start | flex-end | center | space-between | space-around;
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
3.然后設置縱向交叉軸子元素的排列方式
align-items:flex-start | flex-end | center | baseline | stretch;
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
4.在實際開發中遇到了許多問題，在這里主要列舉兩個：
1.父元素下的兩個子元素 ，1子元素靠左，2子元素占據剩余空間。2子元素的文字不固定的，可能很多可能不多，多的話我們就用可以用溢出隱藏解決。
但是右側過多即使溢出隱藏了，左側的文字就會自動換行。
解決方法為 左側加 flex-shrink: 0;//空間不足時不會自動縮小
2.父元素下的子元素，默認平均分配剩余空間，但是子元素無法確定數量 ，設置兩端對齊的話，子元素不夠的話默認就兩側分開顯示，就不能對稱
而設置左對齊的話又不能平均分配剩余空間，真是個頭疼的問題。
最后解決方法是在后面多加幾個空元素，希望每行最大顯示的數量減去2，為n-2個， 這樣剩余空間就能合理分配了。也能保證在不能尺寸屏幕下面，子元素排列正常。
