CSS佈局（彈性盒模型）

1、彈性盒模型介紹

1、彈性盒模型介紹 — 基礎知識

　　彈性盒模型（ Flexible Box 或 Flexbox）是一個CSS3新增佈局模塊，官方稱爲CSS Flexible Box Layout Module，用於實現容器裏項目的對齊、方向、排序（即便在項目大小位置、動態生成的狀況）。彈性盒模型最大的特性在於，可以動態修改子元素的寬度和高度，以知足在不一樣尺寸屏幕下的恰當佈局。

　　*彈性容器(flex container)

　　*彈性子元素(flex item)

　　*軸分爲主軸(main axis) 側軸(cross axis)，彈性子元素沿着主軸依次排列，側軸垂直於主軸。

　　*彈性容器的主軸開始(main start)、主軸結束(main end)和側軸開始(cross start)、側軸結束(cross end) 表明了彈性子元素排列的起始和結束位置。

　　　　

二、彈性盒模型介紹 — 屬性分類

　　（1）彈性容器屬性

　　　　

　　（2）彈性子元素屬性

　　　　

3、屬性詳解

　　（1）語法：flex-direction：row | row-reverse | column | column-reverse
　　含義：設置主軸方向，肯定彈性子元素排列方式

　　

　　

　　（2）語法： flex-wrap：nowrap | wrap | wrap-reverse
　　　　含義：設置彈性子元素超出彈性容器範圍時是否換行

　　　　

　　　　

　　（3）語法：flex-flow：[ flex-direction ] || [ flex-wrap ]
　　　　含義：複合屬性(flex-direction和flex-wrap)，設置彈性子元素排列方式

　　（4）語法：justify-content：flex-start | flex-end | center | space-between | space-around
　　　　含義：設置彈性子元素主軸上的對齊方式

　　

　　

　　（5）語法：align-items：flex-start | flex-end | center | baseline | stretch
　　　　含義：設置彈性子元素側軸上的對齊方式

　　

　　

　　（6）語法：align-content：flex-start | flex-end | center | space-between | space-around | stretch
　　　　含義：側軸有空白且有多行時，設置彈性子元素側軸上的對齊方式

　　

　　（7）語法：order：<integer>
　　　　含義：設置彈性子元素的順序，數值小的排在前面，能夠爲負值。

　　（8）語法： flex-grow：<number>
　　　　含義：設置彈性子元素的擴展比率，不容許爲負值，默認值爲0。 根據彈性盒子元素所設置的擴展因子做爲比率來分配剩餘空間

　　（9）語法： flex-shrink：<number>
　　　　含義：設置彈性子元素的收縮比率，不容許爲負值，默認值爲1
      根據彈性盒子元素所設置的擴展因子做爲比率來收縮空間

　　（10）語法 ： flex-basis：<length> | <percentage> | auto

　　含義 ： 設置彈性子元素的伸縮基準值，不容許爲負值。       默認值爲auto，無特定寬度(高度)。

 　　（11）語法：flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
　　　　含義：複合屬性，設置彈性子元素的如何分配空間。

　　（12）語法：align-self：auto | flex-start | flex-end | center | baseline | stretch
　　　　含義：設置彈性子元素的在側軸上的對齊方式，與align-item的相同。設置某個彈性子元素的獨立對齊方式。

　　

 

---

2、Flexbox菜單項目實戰

 一、要求：

　　　　大屏幕下：

　　

　　　　中屏幕下：

　　

　　　　小屏幕下：

　　

二、body部分：

1 <ul class="menu"> 2 <li><a href="#">HTML</a></li> 3 <li><a href="#">CSS</a></li> 4 <li><a href="#">Javascript</a></li> 5 <li><a href="#">Sass</a></li> 6 <li><a href="#">Ruby</a></li> 7 <li><a href="#">Mongo</a></li> 8 </ul>

三、css樣式部分：

 1 <style>  2  *{  3  padding: 0;  4  margin: 0;  5  border: none;  6 }  7  html{  8  font-size: 12px;  9 } 10  .menu{ 11  width: 100%; 12  border: 1px solid rgba(0,0,0,.1); 13  display: flex; /*激活彈性佈局*/ 14  flex-flow: row wrap; /*設置主軸方向以及是否換行*/ 15 } 16  .menu li{ 17  list-style-type: none; 18  text-align: center; 19  height: 40px; 20  line-height: 40px; 21  flex: 1 1 100%; 22 } 23  .menu li:nth-child(1){ 24  background-color: #39ADD1; 25 } 26  .menu li:nth-child(2){ 27  background-color: #3079AB; 28 } 29  .menu li:nth-child(3){ 30  background-color: #982551; 31 } 32  .menu li:nth-child(4){ 33  background-color: #E15258; 34 } 35  .menu li:nth-child(5){ 36  background-color: #CC6699; 37 } 38  .menu li:nth-child(6){ 39  background-color: #52AC43; 40 } 41  .menu a{ 42  text-decoration: none; 43  color: #fff; 44  font-size: 2rem; 45 } 46  @media (max-width: 768px) { 47  .menu{ 48  flex-wrap: wrap; 49 } 50  .menu li{ 51  flex: 1 1 50%; 52 } 53 } 54 @media (max-width: 480px) { 55 .menu{ 56 flex-direction: column; 57 } 58 .menu li{ 59 flex: 1 1 100%; 60 } 61 } 62 </style>

 

---

3、媒體查詢解析

一、基礎知識

　　響應式佈局（Responsive Web design）指的是在網頁開發過程當中針對不一樣設備開發一套網站，而後根據用戶行爲以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)自適應地顯示不一樣布 局。 響應式佈局的核心是媒體查詢。媒體查詢（ Media Query ）是獲取用戶行爲和設備環境、而後提供相應的CSS規則的過程的簡稱。 媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。

 二、基礎語法

　　

　　語法  <media_query_list>：[<media_query>[',' <media_query>]*]?  <media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*  <expression>：‘('<media_feature>[:<value>]?)’

  　　<表達式>: ‘(‘<媒體特徵>[: <值>]?’)’  <媒體查詢>: [only | not]?  <媒體類型> [and <表達式>*] | <表達式>[and <表達式>]*  <媒體查詢列表>:  [<媒體查詢>[,<媒體查詢>]*]？

 

三、媒體特徵

　　

四、媒體類型

五、媒體查詢規則

六、媒體查詢解析— 屏幕尺寸

　　經常使用的屏幕尺寸從小到大以下所示：　　　　*老智能機:    320px-480px　　　　*智能手機： ≥ 480px　　　　*平板電腦： ≥ 768px　　　　*中等屏幕(桌面顯示器)： ≥ 992px　　　　*大屏幕(大桌面顯示器): ≥1200px　　實現過程當中，遵循移動優先原則