css3引入了一種新的布局模型——flexbox布局(即為flexible box伸縮布局盒模型).
flefxbox布局的主要思想是讓容器有能力讓其子專案能夠改變其寬度、高度（甚至順序），以最佳方式填充可用空間（主要是為了適應所有型別的顯示裝置和螢幕大小）。flex容器會使子專案（伸縮專案）擴充套件來填滿可用空間，或者縮小它們以防止溢位容器。
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: ;
flex-shrink:; (number可以為負值）
5.顯示順序 : order（order屬性透過將伸縮專案分到有序號的組以控制伸縮專案的順序。伸縮容器會從序號最小的組開始布局，在同乙個組裡的伸縮專案一句源文件的次序布局。
order:;
github上乙個flex-layout的樣式封裝
用 srcset 和 實現響應式載入
（1）.用srcset實現
//**查詢條件為真時，實現第乙個(80vw)，否則實現第二個（100vw）
響應式總結
一 響應式頁面 1 響應式 的兩種形式 2 響應式 的兩種技術 二 螢幕大小分類 1 超小螢幕 手機，小於768px 2 小螢幕 平板，大於等於768px media max width 992px 3 中等螢幕 桌面顯示器，大於等於992px media min width 992px 4 大螢幕...
響應式布局總結
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...
響應式學習總結
一 手機瀏覽器預設為我們做的兩件事情 1.頁面渲染在乙個980px ios 640 aniord 的viewport裡面 為了排版正確 2 預設縮放 二 三 不定寬高的水平垂直居中 方法1 box 方法2 flex版 box四 響應式設計 查詢 根據不同的螢幕寬度，設定不同的css樣式，顯示或隱藏等...