有這么一個導(dǎo)航欄：
在大屏幕上，我們需要將導(dǎo)航欄內(nèi)的所有菜單都顯示出來俺祠，但是困鸥，當我們的屏幕小于某個值時，我們需要導(dǎo)航欄展示響應(yīng)成下拉菜單如下：
這個收起的導(dǎo)航欄歌亲，需要達到：
1. 當前項【統(tǒng)計】顯示
2. 其他項隱藏
當我們鼠標【PC端】或者點擊【手機端】統(tǒng)計菇用，我們需要得到一個下拉菜單，效果如下：
其實陷揪，這就是一個響應(yīng)式設(shè)計刨疼，細心的朋友會發(fā)現(xiàn)泉唁，小屏幕下的導(dǎo)航欄實際上有這么個特點：
1. 當前項【統(tǒng)計】處于列表最頂部
2. 非當前頁項鹅龄，按原大屏幕的順序依次向下排列
3.當前項【統(tǒng)計】并不在下拉菜單中
這個效果實際上揩慕，跟簡書的編輯器中的如下是一樣的：
而簡書的實現(xiàn)方式，完全是JS操作扮休，它的HTML結(jié)構(gòu)是這樣的：
可以看到迎卤，實際上顯示的當前項和下拉的當前項，是不同的玷坠，同時蜗搔，實際上，它的HTML結(jié)構(gòu)八堡，是隨著當前項的不同而改變的樟凄，也就是說，ul.submenu下的li是變化的兄渺，這都是通過JS處理的缝龄。
在支持CSS3的瀏覽器下，我們能否只使用JS為當前項增加class的情況下挂谍，就實現(xiàn)這種功能呢叔壤？也就是，我們的初始化HMTL結(jié)構(gòu)是這樣的：
<ul>
? <li><a href="/home">首頁</a>
? <li><a href="/show">展示</a></li>
? <li><a href="/statistic">統(tǒng)計</a></li>
? <li><a href="/setting">設(shè)置</a></li>
? <li><a href="/about">關(guān)于</a></li>
</ul>
當我們點擊【統(tǒng)計】口叙，為【統(tǒng)計】項增加class——"active"炼绘，我們的HTML結(jié)構(gòu)是這樣的：
<ul>
? <li><a href="/home">首頁</a>
? <li><a href="/show">展示</a></li>
? <li class="active"><a href="/statistic">統(tǒng)計</a></li>
? <li><a href="/setting">設(shè)置</a></li>
? <li><a href="/about">關(guān)于</a></li>
</ul>
只是增加一個class，便實現(xiàn)圖3/圖5的效果妄田。
沒有HTML結(jié)構(gòu)的變化俺亮，沒有多余的HTML結(jié)構(gòu)【圖6中的第一個紅色框】，使用CSS3疟呐，便能實現(xiàn)這樣的效果脚曾。
所有的這些，只需要使用flex布局即可萨醒。
很多人都用過flex层宫，但是，大部分人可能并沒有完成使用過flex中其他功能扔涧，比如：flex-direction珍特，order。
而要實現(xiàn)上述的功能晓褪，其實就是基于這兩個功能堵漱。
flex-direction：適用于flex容器，取值row | row-reverse | column | column-reverse涣仿，分別表示：行方向 | 行逆方向 | 列方向 | 列逆方向勤庐，通常來說就是：從左到右 | 從右往左 | 從上到下 | 從下往上示惊。
order：適用于flex子項和flex容器中的絕對定位子元素，用整數(shù)值來定義排列順序愉镰，數(shù)值小的排在前面米罚。可以為負值丈探。
這樣录择，事情就變得很簡單了。我們只需要做兩件事情：
1. 設(shè)置ul display: flex碗降，同時隘竭，flex-direction: column
2. 對class="active"，添加一條：order: -1;
詳細見demo：Flex實現(xiàn)下拉菜單
