響應式布局與彈性布局基礎篇
響應式布局與彈性布局
一.響應式布局
1.響應式布局的概念
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
2.響應式布局的實現
2-1.響應式布局是通過媒體查詢實現的
2-2.使用媒體查詢的三種方式 （與使用CSS的三種方式相結合來看）
2-2-1.直接在CSS中使用
@media 類型 （常選all/screen） and （條件1） and （條件2）{
CSS選擇器{
CSS屬性：屬性值；
}
}
2-2-2.使用link鏈接CSS,media屬性可以設置媒體查詢方式：
<link rel="stylesheet" href="css/02-響應式布局.css" media="all and (max-width:800px)‘’/>
2-2-3. 使用impot導入，直接在url()後面使用空格，間隔媒體查詢規則；
@import url("css/02-響應式布局.css") all and (max-width:800px)";
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>響應式布局</title>
<style>
</style>
<link rel="stylesheet" href="css/02-響應式布局.css" />
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
CSS文件：
@media only screen and (min-width:900px ) {
body{
background-color: blue;
}
.div1{
width: 50%;
height: 100px;
background: yellow;
float: left;
}
.div2{
width: 50%;
height: 100px;
background: pink;
float: left;
}
}
@media only screen and (max-width:900px ) {
body{
background-color: green;
}
.div1{
width: 100%;
height: 100px;
background: yellow;
}
.div2{
width: 100%;
height: 100px;
background: pink;
}
}
2-3-2運行結果：
當設備寬度大於900px時
當設備寬度小於900px時
3.響應式布局例子
html文件：
CSS文件1：
運行結果：
CSS文件2：
運行結果：
CSS文件3：
運行結果：
二.彈性布局
1.彈性布局的基本概念
display:flex 具有彈性特性，任何一個容器都可以指定為Flex布局。Webkit內核的瀏覽器，必須加上-webkit前綴。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子 元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
2.flex彈性布局
2-1，了解兩個基本概念
容器：需要添加彈性布局的父元素；
項目：彈性布局容器中的每一個子元素，稱為項目
2-2，彈性布局的使用
給父容器添加display：flex/inline-flex；屬性，即可使容器內采用彈性布局顯示，而不遵循常規文檔流的顯示方式；
容器添加彈性布局後，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規文檔流；
2-3，display：flex；容器添加彈性布局後，顯示為塊級元素；
display：inline-block； 容器添加彈性布局後，顯示為行級元素；
2-4，註意，設為 Flex 布局以後，子元素的float、clear和vertical-align屬性將失效。但是position屬性依然生效。
3-3，作用於容器的相關屬性：
①flex-direction屬性決定主軸的方向（即項目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
②flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默認值）：不換行，當容器寬度不夠時，每個項目會被擠壓
wrap：換行，並且第一行在容器最上方
wrap-reverse：換行，並且第一行在容器最下方
③flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
④justify-content屬性定義了項目在主軸上的對齊方式。（此屬性與主軸方向息息相關）
主軸方向為：row-起點在左邊，
row-reverse-起點在右邊，
column在起點上面
column-reverse-起點在下面
flex-start（默認值）：居於主軸的起點
flex-end：居於主軸的終點
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。（開頭和最後的項目與父容器之間的邊緣沒有間隔）
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
（開頭和最後的項目與父容器之間的邊緣有一定的間隔）
⑤align-items屬性定義項目在交叉軸上的排列方式。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。（line-height和font-size會影響每行的基線）
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度
⑥align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
（當項目換為多行時，可使用align-content替代justify-content）
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
響應式布局與彈性布局基礎篇