CSS3-彈性佈局篇

1. flex彈性佈局

1.1 概述

1. 佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便。

2. CSS3在佈局方面做了非常大的改進，使得我們對塊級元素的佈局排列變得十分靈活，適應性非常強，其強大的伸縮
   性，在響應式開中可以發揮極大的作用。

3. 別名：伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局

1.2 佈局原理

1. flex 是 flexible Box 的縮寫，意為彈性佈局，用來為盒狀模型提供最大的靈活性，任何一個容器都可以
   指定為 flex 佈局，不需要轉換盒子型別
2. 採用了 flex佈局 的元素，稱為flex容器，它的子元素稱為flex專案
3. 總結flex佈局原理：通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式

1.3 注意

1. 當我們為父元素設為 flex 佈局以後，子元素的float、clear、vertical-align屬性將失效
2. flex佈局沒有外邊距合併
3. flex佈局，分配剩餘空間分配的是內容盒，剩餘空間會先減掉盒子的border、padding 再分配。所以當
   子元素均分剩餘空間的時候，它們相等的是內容盒，如果有的盒子設定了邊框、內邊距，那它整體盒子
   就會比其它盒子大

1.4 語法

    display:flex; /*在父級盒子中申明伸縮佈局*/

1.5 父元素的屬性

1. 設定主軸的方向(預設水平)
    flex-direction:
    取值：
        a). row; 水平方向為主軸,從左到右排列(預設的主軸)
        b). row-reverse; 水平方向為主軸,從右到左排列 
        c). column; 垂直方向為主軸,從上到下排列
        d). column-reverse; 垂直方向為主軸,從下到上排列
        注：水平為主軸,垂直就是側軸;垂直為主軸,水平就是側軸

2. 控制子元素是否換行顯示(預設不換行) 
    flex-wrap: 
    取值： a).  wrap;  換行,如果一行放不下所有子元素,則自動換行
           b).  nowrap; 不換行,如果一行放不下子元素,則平均收縮每個子元素的寬度(預設不換行)
           c).  wrap-reverse; 翻轉,原來是從上往下排列,翻轉後是從下往上排列(很少用)

3. 設定主軸方向+設定換行顯示
   flex-flow: row wrap; 水平方向為主軸,換行顯示

4. 設定子元素在主軸上的排列方式(預設從左到右)
    justify-content: 
    在flex佈局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸。預設主軸方向是x軸，y是側軸
    
    取值: a). flex-start; 讓子元素從父元素起始位置開始排列(類似於子元素左浮動)為預設
              的排列方式

          b). flex-end; 讓子元素從父元素的結束位置開始排列(類似於子元素右浮動)，元素的順序還是從左到右

          c). center; 讓子元素從父元素中間位置開始排列(類似於所有子元素居中排一起)

          d). space-between; 左右對齊，中間平均分頁，產生相同間距

          e). space-around; 將多餘的空間平均分頁在每一個子元素兩邊(類似於左右margin,中間的間距是兩邊的兩倍)

		 f). space-evenly; 將多餘的空間平均分頁在每一個子元素兩邊(類似於左右margin，中間的間距和兩邊一樣大)



5. 設定子元素在側軸上的對齊方式（單行子元素）
    align-items：
    取值：center; 居中對齊
          flex-start; 頂部對齊
          flex-end; 底部對齊
          stretch; 拉伸,讓子元素在側軸方向上拉伸,填滿整個側軸,前提是子元素沒有設定高度;(預設值)
          baseline; 按照子元素中文字的基線對齊(用的很少)
6. 設定子元素在側軸上的對齊方式（多行子元素）
	align-content：
	只能用於子元素出現了換行的情況（多行），在單行沒有效果
	取值： flex-start; 在側軸的頭部開始排列（預設值）
		  flex-end; 在側軸的尾部開始排列
		  center; 在側軸中間顯示
		  space-around; 子元素在側軸平分剩餘空間
		  space-between; 子元素在側軸先分佈兩頭，再平分剩餘空間
		  stretch; 設定子元素高度平分父元素高度

1.6 子元素的屬性:

1. 定義子元素在父元素中佔據幾份剩餘空間
    flex:1;
    會計算所有子元素flex的值,然後按值佔的比例分配；預設為0
    也可以用百分比
    

2. 定義收縮比例
    flex-shrink: 在一行放不下所有子元素而又不換行的情況下,子元素會平均收縮
    比例值計算：當前空間的flex-shrink值/所有兄弟元素的flex-shrink值的和(包括當前元素的值)
    平均收縮的預設值為1;表示每個子元素收縮一份空間;
    不想收縮可以設定為0;但是有可能會導致子元素溢位

3. 擴充套件子元素的寬度
   flow-grow: 設定當前元素應該佔據父元素剩餘空間的比例值(1、2、3...);
   比例值計算：當前空間的flex-grow值/所有兄弟元素的flex-grow值的和(包括當前元素的值)
   flow-grow預設值為0：說明子元素並不會去佔據剩餘空間

4. 設定單個元素在側軸方向上的對齊方式（瞭解）
    align-self:
     取值：center; 居中對齊
          flex-start; 頂部對齊
          flex-end; 底部對齊
          stretch; 拉伸,讓子元素在側軸方向上拉伸,填滿整個側軸,前提是子元素沒有設定高度;(預設值)
          baseline; 按照子元素中文字的基線對齊(用的很少)
5. 設定子元素的排列順序（瞭解）
	order：
	取值：數值越小，排列越靠前，預設為0，可以為負數
	注意：和z-index不一樣

1.7 flex佈局的高度

1. 父元素為flex佈局時：
2. 沒有設定高度的子元素與父元素高度一致。
3. 如果父元素設定固定高度，則子元素中沒有設定高度的元素將繼承父元素的高度；
4. 但是如果父元素的align-items設定以後那麼子元素的高度則會有自身內容決定
5. 如果父元素沒有設定高度，其高度由最高的子元素決定。