Flex佈局講解

彈性盒模型

彈性盒子是 CSS3 的一種新的佈局模式。CSS3 彈性盒(Flexible Box或flexbox)，是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器經過設置 display 屬性的值爲 flex將其定義爲彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。

舊：display：box ;子元素佔的份數box-flex

.main{
    width:100%; height: 20%; border: 1px solid #000000;
    display: -webkit-box;
}
.main div{
    -webkit-box-flex: 1;
    text-align: center;
}
.main div:nth-child(2){
    -webkit-box-flex: 8;
}
複製代碼

一、box-orient
box-orient(orient譯爲排列更準確)用來肯定父容器裏子容器的排列方式，是水平仍是垂直 horizontal | vertical
二、box-direction
box-direction用來肯定父容器裏的子容器排列順序，具體屬性以下代碼所示：
normal | reverse
三、box-align
box-align表示父容器裏面子容器的垂直對齊方式，可選參數以下所示： start | end | center | baseline | stretch
四、box-pack
box-pack表示父容器裏面子容器的水平對齊方式，可選參數以下所示： start | end | center | justify

彈性子元素一般在彈性盒子內一行顯示。默認狀況每一個容器只有一行。 實例：

.main{ 
    width: 500px;
    height: 300px;
    border: 1px solid #f00;
    display: flex;
}
.main div{
    width: 100px;
    height: 100px;
    background: #0ff;
}
<div class="main">
    <div></div>
    <div></div>
    <div></div>
</div>
複製代碼

彈性父元素屬性

flex-direction
flex-direction 順序指定了彈性子元素在父容器中的位置。

· row：橫向從左到右排列(左對齊)，默認的排列方式。
· row-reverse：反轉橫向排列(右對齊，從後往前排，最後一項排在最前面。
· column：縱向排列。
· column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面.
複製代碼

justify-content
justify-content 內容對齊(justify-content)屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線(main axis)對齊

· flex-start：
    彈性項目向行頭緊挨着填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，然後續彈性項依次平齊擺放。
· flex-end：
    彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，然後續彈性項依次平齊擺放。
· center：
    彈性項目居中緊挨着填充。(若是剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出)。
· space-between：
    彈性項目平均分佈在該行上。若是剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。不然，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，而後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。
· space-around：
    彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。若是剩餘空間爲負或者只有一個彈性項，則該值等同於center。不然，彈性項目沿該行分佈，且彼此間隔相等(好比是20px)，同時首尾兩邊和彈性容器之間留有一半的間隔(1/2*20px=10px)。
複製代碼

align-items
align-items 設置或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式。

· flex-start：彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。
· flex-end：彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。
· center：彈性盒子元素在該行的側軸(縱軸)上居中放置。(若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度)。
· baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
flex-wrap 屬性
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
· nowrap - 默認， 彈性容器爲單行。該狀況下彈性子項可能會溢出容器。
· wrap - 彈性容器爲多行。該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
· wrap-reverse -反轉 wrap 排列。
複製代碼

align-content
align-content 屬性用於修改 flex-wrap 屬性的行爲。相似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。

· stretch - 默認。各行將會伸展以佔用剩餘的空間。
· flex-start - 各行向彈性盒容器的起始位置堆疊。
· flex-end - 各行向彈性盒容器的結束位置堆疊。
· center -各行向彈性盒容器的中間位置堆疊。
· space-between -各行在彈性盒容器中平均分佈。
· space-around - 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。
複製代碼

彈性子元素屬性 flex-grow定義彈性盒子元素的擴展比率。

.main div:nth-child(1){
       flex-grow: 2;
   }
複製代碼

align-self align-self 屬性用於設置彈性元素自身在側軸(縱軸)方向上的對齊方式。

· auto：若是'align-self'的值爲'auto'，則其計算值爲元素的父元素的'align-items'值，若是其沒有父元素，則計算值爲'stretch'。  
· flex-start：彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。  
· flex-end：彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。  
· center：彈性盒子元素在該行的側軸(縱軸)上居中放置。(若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度)。  
· baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。  
· stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。  
複製代碼

媒體查詢：

@media only screen and (min-width: 340) {
body{
background: #ff0;
}
}@media only screen and (min-width: 340px) and (max-width: 640px) {
body{
background: #f00;
}
}@media only screen and (min-width: 640px) and (max-width: 740px) {
body{
background: #0f0;
}
}
複製代碼

如何識別手機尺寸經過設置meta語句

· <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    · device-width 設備屏幕分辨率的寬度值
    · initial-scale    設定頁面初始縮放比例(0-10.0)
    · minimum-scale 設定最小縮小比例(0-10.0)
    · maximum-scale 設定最大放大比例(0-10.0)
    · user-scalable 設定用戶是否能夠縮放(yes/no)
複製代碼