彈性布局
浮動+百分比布局
Flex布局
懸浮+百分比布局
浮動+百分比布局好處
網(wǎng)頁內(nèi)容寬度自適應(yīng)
多設(shè)備都適用
Flex布局
1.Flex布局是在CSS3中引入但两，被叫做彈性盒模型
2.該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間
3.Flex布局功能
在屏幕和瀏覽器窗口大小發(fā)生改變時践美，可以靈活的調(diào)整布局
控制元素在頁面的布局方向
按照不同于DOM所指定排序方式對屏幕上的元素重新排序
4.Flex布局的優(yōu)勢
可以讓盒子里面的元素排在一行
盒子里面的元素是高度相同
Flex布局語法
語法：
display:flex;
Flex屬性
常用屬性
屬性? ????????????????????????????說明
flex? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?伸縮性
flex-direction? ? ? ? ? ? ? ? 伸縮流方向
flex-wrap? ? ? ? ? ? ? ? ? ? ? 伸縮換行
justify-items? ? ? ? ? ? ? ? ? ?主軸對齊
align-items????????????????????側(cè)軸對齊
伸縮性flex
語法：
flex:1;? ? 伸縮值為1，標(biāo)識寬度占父級余空間的一份
部分CSS3屬性在瀏覽器下的兼容方式芋肠，需要給元素加前綴
伸縮流方向flex-direction
語法：
row：默認(rèn)值元素從左到右排列
row-reverse：元素從右到左排序
column：元素從上到下排列
column-reverse：元素從下到上排序
伸縮換行flex-wrap
nowrap：默認(rèn)值 伸縮容器單行顯示蝇更，伸縮項不會換行
wrap：伸縮容器多行顯示岭洲，伸縮項目會換行
wrap-reverse：伸縮容器多行顯示宛逗，伸縮項目會換行，且顛倒行順序
主軸對齊justify-content
flex-start：向一行的起始位置靠奇
filex-end：向一行的結(jié)束位置靠奇
center：想一行的中間位置靠奇
space-between：平均分布在行內(nèi)盾剩，第一伸縮項目在一行的最開始最后一個伸縮項目在一行最重點
側(cè)軸對齊align-items
flex-start：在側(cè)軸起點的外邊距緊靠該行在側(cè)軸起始邊
flex-end：在側(cè)軸重點邊的外邊距緊靠該行在側(cè)軸終點邊
center：外邊距盒在該行的側(cè)軸上居中放置
stretch：默認(rèn)值拉伸填充一個伸縮容器
baseline：根據(jù)一行文字的基線對齊
響應(yīng)式網(wǎng)頁設(shè)計
響應(yīng)式網(wǎng)頁設(shè)計(RWD,Responsive Web Design)
由伊衫准ぃ·馬克特(Ethan Marcotte)提出
有三種已有的開發(fā)技術(shù)整合起來替蔬，并命名
彈性布局
彈性圖片
媒體和媒體查詢
媒體類型
在CSS2中常遇到的媒體類型是
All（全部）
Screen（屏幕）
Print（頁面打印或打印預(yù)覽模式）
實際上媒體類型不只這三種，W3C共列出10種媒體類型
媒體類型的引入方式
語法：
@media方式
link方法
媒體特性
媒體特性語法
關(guān)鍵字
and：同時滿足這兩者時生效屎暇，到達限定范圍
only：指定某種特定的媒體類型承桥，可以用來排除不支持美媒體查詢的瀏覽器
not：排除某種指定的媒體類型，即排除符合表達式的設(shè)備
