雖說對flex佈局這種佈局方式有聽說，但還是第一次深入的去了解，有種相見恨晚的感覺。
flexbox的出現是爲了解決複雜的web佈局，因爲這種佈局方式很靈活。容器的子元素可以任意方向進行排列。此屬性目前處於非正式標準，在較新的瀏覽器中基本可以使用該屬性。
flexbox有衆多屬性，在這裏我只記錄下我完成這次任務用到的一些。
頁面的基本框架我用了ul和li標籤。
首先，先對容器添加display:flex屬性，對於webkit內核的瀏覽器，爲了到兼容，也需要再加一句display:-webkit-flex.
第二，確定容器中內容的排列方式flex-direction,它有四個屬性row–行的方式，column–列的方式，row-reverse–以反方向排列，column-reverse也是如此。
第三，容器中內容換行方式flex-wrap，wrap伸縮容器多行顯示，默認是nowrap單行顯示。
第四， justify-content 定義伸縮項目沿着主軸線的對齊方式。我用的space-between：伸縮項目會平均地分佈在行裏。第一個伸縮項目一行中的最開始位置，最後一個伸縮項目在一行中最終點位置。它還有其他屬性，比如space-around。
第五， align-items:center；調準伸縮行在伸縮容器裏的對齊方式。
以上是對容器做的處理。
基於任務要求，要做一個響應式處理，並且內容排列順序要有所改變，這就需要用到Flex的order屬性，order默認都是0，數值越大，排列越靠後。這是我的處理：
@media (max-width: 640px)
{
.flex-item:nth-child(1){
order:1;
}
.flex-item:nth-child(2){
order:1;
}
.flex-item:nth-child(3){
order:2;
margin-top: 20px;
}
.flex-item:nth-child(4){
order:0;
}
}
需要實現的效果圖
效果圖：Flex佈局練習demo
查看完整代碼：https://github.com/dannisi/baidu_ife_task1/tree/gh-pages/task10
最後我想拋出一個問題，還望看到的大神指點迷津
li{
list-style: none;
width: 150px;
padding:20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
我在li標籤添加box-sizing屬性後，在chome瀏覽器，屏幕縮小到頁面達到效果圖後，就不能在縮小，而在其他瀏覽器不行，爲什麼？求大神解答