為什么是flex?

1.0傳統布局和flex布局對比

1.1傳統布局

• 兼容性好
• 布局繁瑣
• 局限性，不能在移動端很好的布局

1.2 flex布局

• 操作方便，布局極其簡單，移動端使用比較廣泛
• pc端瀏覽器支持情況比較差
• IE11或更低版本不支持flex或僅支持部分

1.3 建議

• 如果是pc端頁面布局，還是采用傳統方式
• 如果是移動端或者是不考慮兼容的pc則采用flex

基礎篇

2.0 flex布局原理

• 一句話: 就是通過給父盒子添加display:flex屬性，來控制子盒子的位置和排列方式
• 一定要記得給父盒子加
• 定要記得給父盒子加
• 要記得給父盒子加
• 記得給父盒子加
• 得給父盒子加
• 給父盒子加
• 父盒子加

3.0 父項常見屬性(給父盒子加)

• flex-direction：設定主軸的方向
• justify-content：設定主軸上的子元素排列方式
• flex-wrap：設定子元素是否換行
• align-content：設定側軸上的子元素的排列方式（多行）
• align-items：設定側軸上的子元素排列方式（單行）
• flex-flow：復合屬性，相當于同時設定了 flex-direction 和 flex-wrap

3.1 flex-direction設定主軸的方向 (一般情況誰沒事改主軸,用的比較少)

• 在 flex 布局中，是分為主軸和側軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸
• 默認主軸方向就是 x 軸方向，水平向右
• 默認側軸方向就是 y 軸方向，水平向下

• 注意： 主軸和側軸是會變化的，就看 flex-direction 設定誰為主軸，剩下的就是側軸，而我們的子元素是跟著主軸來排列的

  • 下圖是flex-direction主軸的屬性值:
    

3.2 justify-content 設定主軸上的子元素排列方式 (巨常用!)

3.3 flex-wrap設定是否換行

• 默認情況下，專案都排在一條線（又稱”軸線”）上，flex-wrap屬性定義，flex布局中默認是不換行的，
• nowrap 不換行
• wrap 換行

示例1

• 布局如下

 <div class="father">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

• 樣式如下

		.father{
            width: 400px;
            display: flex;
            justify-content: flex-start;/*全部放到最前面*/
            flex-wrap: nowrap;/*默認值是不換行*/
        }
        .father>div{
            background-color: rgb(128, 128, 241);
            width: 100px;
            height: 100px;
            margin: 10px;
        }

• 效果如下
  
  誒,問題來了?
  • 父盒子寬為400px,子盒子寬為100px,但是它一行放下了6個,
  • 也就是說我子盒子的width被自動壓縮了,那這可不行!
  • 我想要的樣式應該是放兩行,width還是100px, 那這就用到了flex-wrap:wrap屬性

/*將父盒子元素修改為*/
	flex-wrap: wrap;/*換行*/

• 見證奇跡的時刻
  
• 我tm直呼專業 !!!

3.4 align-items 設定側軸上的子元素排列方式（單行 ）

• 該屬性是控制子項在側軸（默認是y軸）上的排列方式 在子項為單項（單行）的時候使用
• flex-start 從頭部開始
• flex-end 從尾部開始
• center 居中顯示
• stretch 拉伸

示例2 align-items:center

.father{
            width: 700px;
            display: flex;
            justify-content: flex-start;
            align-items: center; /*加上了側軸單行居中*/
            background-color: rgb(240, 105, 134) /*加上了背景顏色*/
            height: 200px; /*加上了高*/
        }

• 見證奇跡的時刻
  

示例3 align-items: stretch(拉伸)

		.father{
            width: 700px;
            display: flex;
            justify-content: flex-start;
            align-items: stretch; /*改為拉伸*/
            background-color: rgb(240, 105, 134);
            height: 200px;
        }
        .father>div{
            background-color: rgb(128, 128, 241);
            width: 100px;
            /* height: 100px; */  將子盒子高度注釋
            margin: 10px;
        }

• 見證奇跡的時刻(可以看出沒有設高的子盒子被拉伸了)
  

3.5 align-content 設定側軸上的子元素的排列方式（多行）

設定子項在側軸上的排列方式 并且只能用于子項出現 換行 的情況（多行），在單行下是沒有效果的，

示例4 align-content : stretch(拉伸)

		 .father{
            width: 400px;
            display: flex;
            justify-content: flex-start;
            align-content: stretch;
            flex-wrap: wrap;
            background-color: rgb(240, 105, 134);
            height: 300px;
        }
        .father>div{
            background-color: rgb(128, 128, 241);
            width: 100px;
            /* height: 100px; */
            margin: 10px;
        }

• 見證奇跡的時刻(可以看出沒有設高的兩行子盒子被拉伸了)
  

3.6 align-content 和align-items區別

• align-items 適用于單行情況下， 只有上對齊、下對齊、居中和 拉伸
• align-content適應于換行（多行）的情況下（單行情況下無效）， 可以設定 上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值，
• 總結就是單行找align-items 多行找 align-content

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性

flex-direction:row;
flex-wrap:wrap;

一個頂倆, 美汁汁
flex-flow:row wrap;

進階篇

• 以下屬性是設在子盒子上!

• 下屬性是設在子盒子上!

• 屬性是設在子盒子上!

• 性是設在子盒子上!

• 設在子盒子上!

• 在子盒子上!

• 子盒子上!

• 示例布局

<div class="father">
        <div></div>
        <div></div>
        <div></div>
    </div>

4.0 flex布局子項常見屬性

• flex子專案占的份數
• align-self控制子項自己在側軸的排列方式
• order屬性定義子項的排列順序（前后順序）

4.1 flex 屬性 (真·好使!)

flex 屬性定義子專案分配剩余空間，用flex來表示占多少份數，

.item {
    flex: <number>; /* 默認值 0 */
}

		.father{
            width: 400px;
            display: flex;
            justify-content: flex-start;
            background-color: rgb(240, 105, 134);
        }
        .father>div{
            background-color: rgb(128, 128, 241);
            height: 100px;
            margin: 10px;
        }
        .father>div:nth-of-type(1){
            flex:1;
        } 
        .father>div:nth-of-type(2){
            flex:2;
        } 
        .father>div:nth-of-type(3){
            flex:1;
        } 

• 將三個子盒子的比例設為1:2:1
• (子盒子沒有給width,直接平分父盒子的width)
  

4.2 align-self控制子項自己在側軸上的排列方式

align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆寫 align-items 屬性，

默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch，

span:nth-child(2) {
      /* 設定自己在側軸上的排列方式 */
      align-self: flex-end;
}

		.father{
            width: 400px;
            display: flex;
            justify-content: flex-start;
            background-color: rgb(240, 105, 134);
            height: 200px;
        }
        .father>div{
            background-color: rgb(128, 128, 241);
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        .father>div:nth-of-type(3){
            align-self: flex-end;
        } 

• 由下圖可見前兩個盒子遵循父盒子的主軸flex-start排列(默認主軸為橫軸)
• 第三個子盒子遵循側軸flex-end排列(默認側軸為豎軸)
  

4.3 order 屬性定義專案的排列順序

數值越小，排列越靠前，默認為0，

注意：和 z-index 不一樣，

.item {
    order: <number>;
}

• 一開始為紅綠藍排列

		.father>div:nth-of-type(1){
            background-color: rgb(255, 121, 121);
        } 
        .father>div:nth-of-type(2){
            background-color:rgb(49, 226, 49);
        } 
        .father>div:nth-of-type(3){
            background-color: rgb(136, 136, 255);
        } 

• 然后給第二個子盒子添加一個 order:-1; 屬性
• 綠盒子的優先級增加了

		.father>div:nth-of-type(1){
            background-color: rgb(255, 121, 121);
        } 
        .father>div:nth-of-type(2){
            background-color:rgb(49, 226, 49);
            order: -1;
        } 
        .father>div:nth-of-type(3){
            background-color: rgb(136, 136, 255);
        } 

• 變成了

flex布局, 永遠滴神 !