近期學(xué)習(xí)，有很多感想，有時(shí)候看似相近的概念，其實(shí)意義卻不相同。所以學(xué)習(xí)要針對(duì)不同的名詞有明確的區(qū)分意識(shí)。

抽空時(shí)間，打算學(xué)習(xí)下display:flex;本以為就是一個(gè)小小的知識(shí)點(diǎn)，正式去研究的時(shí)候，才發(fā)現(xiàn)display:flex;有很多內(nèi)容，能實(shí)現(xiàn)很多效果。比如三欄布局（左右兩欄固定，中間欄自適應(yīng)），圣杯布局。

后來想著經(jīng)常聽到流式布局，自適應(yīng)布局，響應(yīng)式布局，他們有什么區(qū)別呢，就去搜了許多內(nèi)容查看，才發(fā)現(xiàn)每種布局都有優(yōu)缺點(diǎn)和不同使用場(chǎng)景。

靜態(tài)布局：給頁(yè)面元素設(shè)置固定的寬度和高度，單位用px，當(dāng)窗口縮小，會(huì)出現(xiàn)滾動(dòng)條，拉動(dòng)滾動(dòng)條顯示被遮擋內(nèi)容。針對(duì)不同分辨率的手機(jī)端，分別寫不同的樣式文件。

自適應(yīng)布局：創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍，使用@media媒體查詢技術(shù)。

流式布局：元素的寬高用百分比做單位，元素寬高按屏幕分辨率調(diào)整，布局不發(fā)生變化。屏幕尺度跨度過大的情況下，頁(yè)面不能正常顯示。

響應(yīng)式布局：采用自適應(yīng)布局和流式布局的綜合方式，為不同屏幕分辨率范圍創(chuàng)建流式布局。

彈性布局：要點(diǎn)在于使用<tt>em和rem單位</tt>來定義元素寬度，與流式布局有極大的相似性，但也有不同之處，主要區(qū)別在于彈性布局的尺寸主要根據(jù)字體大小而變化。

至于display:flex;相關(guān)知識(shí)，我就不贅述了，推薦阮一峰的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

具體選擇哪種布局方式，要根據(jù)需求確定。