響應式布局

一、實作彈性布局的方法：

1.浮動+百分比

好處：網頁内容寬度自适應

多裝置都适用

2.flex彈性盒模型：該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用空間。

二、Flex布局的功能：

1.在螢幕和浏覽器視窗大小發生改變時，可以靈活的調整布局。

2.控制元素在頁面的布局方向。

3.按照不同于DOM所指定的排序方式對螢幕上的元素進行重新排序。

三、Flex布局的優勢：

1.可以讓盒子裡面的元素排在一行

2.盒子裡面的元素高度相同。

四、Flex的文法：

在父元素中設定display:flex;

五、flex：伸縮性：

1.文法：flex:值; eg: flex:1;

2.作用：讓伸縮項目的寬度和高度自動填充伸縮容器額外的空間。

六、flex-direction:伸縮流方向：

1.寫代碼的位置：在父元素的css中寫，文法為：flex-direction:row(row-reverse)(column)(column-reverse)

2.row:子元素從左右排序

3.row-reverse:子元素從右到左排序

4.column：子元素從上到下排序

5.column-reverse:子元素從下到上排序.

七、伸縮換行：

1.在父元素中加flex-wrap:wrap;屬性

2.wrap:換行，從上到下排序

3.wrap-reverse:換行，從下到上排序。

4.nowrap:預設值，不換行。

八、主軸對齊：

1.文法：justify-content:center;

2.center：居中對齊

3.flex-start:左對齊

4.flex-end:右對齊

5.space-around:平均對齊

6.space-between:兩端對齊

九、側軸對齊：

1.文法：algin-items:center;

3.flex-start:上對齊

4.flex-end:下對齊

十、媒體類型：

1.all:所有裝置

2.print:列印用紙或列印預覽視圖

3.screen:電腦顯示器

4.引入方式：

（1）@media 媒體類型{

css樣式

}

（2）

十一、媒體特性：

1.是c3對媒體類型的增強版

2.可以将媒體特性看成：

媒體類型（判斷條件）+css（符合條件的樣式規則）

3.文法：

@media 媒體類型 and 媒體特性{

十二、關鍵詞：

1.and:同時滿足這兩者時生效

eg:@media all and (max-width:1000px){css代碼}

2.only:指定某種特定的媒體類型，可以用來排除不支援媒體查詢的浏覽器

3.not:用來排除某種特定的媒體類型。