一掩驱、概念
- CSS媒體查詢
一個(gè)媒體查詢由一個(gè)可選的媒體類型和零個(gè)或多個(gè)使用媒體功能限制樣式表范圍的表達(dá)式組成潘靖， 例如 寬度穿剖，高度和顏色。這些表達(dá)式描述了媒體特征， 最終會(huì)被解析為true或false。 如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設(shè)備類型棚赔， 并且所有的表達(dá)式的值都是true，那么該媒體查詢的結(jié)果為true贬芥。在CSS3中添加的媒體查詢，允許內(nèi)容的呈現(xiàn)針對一個(gè)特定范圍的輸出設(shè)備而定制宣决，而不必改變內(nèi)容本身蘸劈。 - flex布局
Flexbox布局（Flexible Box）模塊旨在提供一個(gè)更佳有效的布局方式，更好的控制項(xiàng)目的對齊和自由分配容器空間尊沸，即使它們的大小是未知的或動(dòng)態(tài)的威沫。因此得其名"flex"。
1.用來為盒狀模型提供最大的靈活性洼专。
2.任何一個(gè)容器都可以指定為flex布局
3.設(shè)為flex布局后棒掠，子元素的float、clear屁商、vertical-align屬性將消失烟很。
4.采用flex布局的元素，稱為flex容器蜡镶，簡稱容器雾袱。
5.它的所有子元素自動(dòng)成為容器成員，稱為flex項(xiàng)目官还，簡稱項(xiàng)目芹橡。
6.容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。 - 柵格系統(tǒng)
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局妻枕，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中僻族。
更多http://v3.bootcss.com/css/#grid
二粘驰、媒體查詢demo
