（總結）flex-layout響應式佈局

Flexbox佈局簡介

CSS3引入了一種新的佈局模型——flexbox佈局(即爲flexible box伸縮佈局盒模型).
Flefxbox佈局的主要思想是讓容器有能力讓其子項目能夠改變其寬度、高度（甚至順序），以最佳方式填充可用空間（主要是爲了適應所有類型的顯示設備和屏幕大小）。Flex容器會使子項目（伸縮項目）擴展來填滿可用空間，或者縮小它們以防止溢出容器。
flexbox佈局可以輕鬆實現屏幕和瀏覽器窗口大小發生改變時保持元素的相對位置和大小不變，同時減少了依賴浮動佈局來實現元素位置的定義以及重置元素大小。在定義伸縮項目大小時，伸縮容器會預留一些可用空間，可以調節伸縮項目的大小和位置。

Flexbox的一些屬性

1.通過設置display: flex; 來將元素設置爲伸縮容器。
2.主軸對齊方式（適用於伸縮容器，也就是伸縮項目的父元素）： justify-content
可取值有：
(1).flex-start : 伸縮項目向一行的起始位置靠齊。(左對齊)

(2).flex-end： 伸縮項目向一行的結束位置靠齊。（右對齊）

(3).center: 伸縮項目向一行的中間位置靠齊。 （水平居中）
(4).space-between:伸縮項目平均分佈在行間。兩端不留空位。
(5).space-around:伸縮項目平均分佈在行間，兩端保留一半的空間。

3.側軸(即垂直於主軸方向)對齊方式（適用於伸縮項目，即子元素）：align-itens
可取值有：
(1).flex-start: 伸縮項目在側軸起點邊的外邊距緊靠該行在側軸的起始邊 （頂部對齊）

(2).flex-end: 伸縮項目在側軸終點邊的外邊距緊靠該行在側軸的終點邊。（底部對齊）

(3).center: 伸縮項目的外邊距盒在該行的側軸上居中放置（垂直居中）

(4).basline: 伸縮項目根據伸縮項目的基線對齊。
(5).stretch：默認值。伸縮項目拉伸填充整個伸縮容器。

4.伸縮性 flex （用來指定可伸縮長度的部件：擴展比率、收縮比率以及收縮基準值）
flex-grow: <number>;
flex-shrink:<number>; (number可以爲負值）

5.顯示順序 : order（order屬性透過將伸縮項目分到有序號的組以控制伸縮項目的順序。伸縮容器會從序號最小的組開始佈局，在同一個組裏的伸縮項目一句源文檔的次序佈局。
order:<number>;

github上一個flex-layout的樣式封裝

響應式圖片

用 srcset 和 <picture>實現圖片響應式加載
（1）.用srcset實現

<img size = "(min-width: 40em) 80vw,100vw"  //媒體查詢條件爲真時，實現第一個(80vw)，否則實現第二個（100vw）
          srcset = "img/1.jpg 375w,
                         img/2.jpg 480w,
                         img/3.jpg 768w"
          src = "img/4.jpg"
          alt = "responsive picture" /> 

（2）.用<picture>實現

<picture>
<source media = "(min-width: 480px)"
        srcset = "img/1.jpg">
<source media = "(min-width: 640px)"
        srcset = "img/2.jpg">  
<img src = "img/3.jpg" />
</picture>