一、使用媒體查詢的三種方式
1、直接在css中使用
@media 類型(常選all/screen) and (條件1) and (條件2) {
css選擇器{
css屬性：屬性值；
}
}

2、使用link鏈接css，media屬性可以設置媒體查詢方式：
<link rel="stylesheet" href="css/02-響應式布局.css" media=" all and (max-width:800px)" />

3、使用import導入，直接在url()後面使用空格，間隔媒體查詢規則：
@import url("css/02-響應式布局.css") all and (max-width:800px);

二、flex彈性布局

1、了解兩個基本概念：
容器：需要添加彈性布局的父元素
項目：彈性布局中的每一個子元素，稱為項目

2、彈性布局的使用
①給父容器添加 display:flex/inline-flex; 屬性，即可使容器采用彈性布局顯示，而不遵循常規文檔流的顯示方式
②容器添加彈性布局後，僅僅是容器內容采用彈性布局，而容器本身在文檔流中的定位方式依然遵循常規文檔流
③display:flex;容器添加彈性布局後，顯示為塊級元素
display:inline-flex;容器添加彈性布局後，顯示為行級元素
④設置flex布局後，子元素的float、clear、vertical-align屬性將失效，但position屬性依然有效

3、作用於容器的相關屬性
①flex-direction屬性決定主軸的方向（即項目的排列方向）
row(默認值):主軸在水平方向，起點在左端
row-reverse:主軸在水平方向，起點在右端
column:主軸在垂直方向，起點在上端
column-reverse:主軸在垂直方向，起點在下端

②flex-wrap屬性定義，如果一條軸線排不下，如何換行
nowrap(默認):不換行，當容器寬度不夠時，每個項目會被擠壓寬度
wrap:換行，第一行在容器最上方
wrap-reverse:換行，第一行在容器最下方

③flex-flow屬性是flex-direction屬性和flex-wrap屬性的縮寫形式，默認值為flex-flow:row nowrap;

④justify-content屬性定義了項目在主軸上的對齊方式
>>>此屬性與主軸的方向息息相關——主軸方向為：row——起點在左端、row-reverse——起點在右端、column——起點在上端
column-reverse——起點在下端

flex-start（默認值）：項目位於主軸起點
flex-end：項目位於主軸終點
center： 居中
space-between：兩端對齊，項目之間的間隔都相等，開頭和最後的項目，與父容器邊緣沒有間隔
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

⑤align-items屬性定義項目在交叉軸上的排列方式
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊，文字的行高、字體大小會影響每行的基線
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
⑥align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用

當項目換為多行時，可將 align-items 換為 align-content

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。

4、作用於項目上的屬性
①order:定義了項目的排列順序，默認為0，越小排列越靠前

②flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大

③flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小(為0，不縮小)

④flex-basis定義項目占據的主軸空間(如果主軸為水平，則設置這個屬性，相當於設置項目的寬度，原width將會失效)

⑤flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto(auto表示不設置項目寬高度);後兩個屬性可選
這個屬性有兩個快捷設置: auto(相當於1 1 auto)、none(00 auto)

⑥align-self:定義單個項目自身在交叉軸上的排列方式，可以覆蓋掉容器上的 align-items 屬性
屬性值：與 align-items 相同，默認值為 auto，表示繼承父容器的 align-items 屬性。

8.13 一周學習