1.flex vs inline-flex  [html結構：1個div(.box)後面接著1個span]
flex：具有block的特性.
span 
           
              .box{
                  display: flex;
                  width: 100px;
                  height: 50px;
                  border: 1px solid black;
                  background:green;
              }
inline-flex：具有inline-block的特性.
span 
      
            .box{
                display: inline-flex;
                width: 100px;
                height: 50px;
                border: 1px solid black;
                background:green;
            }
2.flex-direction：項目 排列方向.  [html結構：1個div(.container)包3個div (.item)]
原始排列
1
2
3
              .container {
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }  
              }
默認:row
1
2
3
                .container {
                    display: flex;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;
  
                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }  
                }
row：從左到右排列項目
1
2
3
              .container {
                  display: flex;
                  flex-direction: row;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }  
              }
row-reverse：從右到左排列項目
1
2
3
              .container {
                  display: flex;
                  flex-direction: row-reverse;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }  
              }
column：從上到下排列項目
1
2
3
              .container {
                  display: flex;
                  flex-direction: column;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }  
              }
column-reverse：從下到上排列項目
1
2
3
              .container {
                  display: flex;
                  flex-direction: column-reverse;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }  
              }
3.flex-wrap：項目 換行方式.  [html結構：1個div(.container)包6個div(.item)]
默認值：nowrap
1
2
3
4
5
6
                .container {
                  display: flex;
                  flex-direction: row;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      flex:none; //默認壓縮main-size,先設定不具彈性.
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
nowrap：不換行
1
2
3
4
5
6
                .container {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        flex:none;
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
wrap：換行 多餘項目排在下一行
1
2
3
4
5
6
              .container {
                  display: flex;
                  flex-direction: row;
                  flex-wrap:wrap;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      flex:none;
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
wrap-reverse：換行 多餘項目排在上一行
1
2
3
4
5
6
              .container {
                  display: flex;
                  flex-direction: row;
                  flex-wrap:wrap-reverse;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      flex:none;
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
4.justify-content(main-axis)：項目 主軸對齊方式.  [html結構：1個div(.container)包3個div(.item)]
默認值：flex-start
(ps：main-axis方向 = row => 從左到右)
1
2
3
            .container {
                  display: flex;
                  flex-direction: row;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      flex:none;
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
flex-start：往起始邊界對齊
1
2
3
              .container {
                  display: flex;
                  flex-direction: row;
                  justify-content:flex-start;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
center：往中間對齊
1
2
3
              .container {
                  display: flex;
                  flex-direction: row;
                  justify-content:center;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
flex-end：往結束邊界對齊
1
2
3
              .container {
                  display: flex;
                  flex-direction: row;
                  justify-content:flex-end;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
space-between：第一項目靠起始邊界.最後項目結束邊界.其餘空白平均分配剩下項目左右兩側.
1
2
3
                  .container {
                      display: flex;
                      flex-direction: row;
                      justify-content:space-between;
                      width: 200px;
                      height: 200px;
                      border: 1px solid black;

                      .item {
                          width: 50px;
                          height: 50px;
                          border: 1px solid black;
                          box-sizing: border-box;
                      }
                  }
space-around：將空白平均分配每個項目左右兩側
1
2
3
            .container {
                display: flex;
                flex-direction: row;
                justify-content:space-around;
                width: 200px;
                height: 200px;
                border: 1px solid black;

                .item {
                    width: 50px;
                    height: 50px;
                    border: 1px solid black;
                    box-sizing: border-box;
                }
            }
space-evenly：將空白平均分配給項目之間的間隔
1
2
3
            .container {
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                width: 200px;
                height: 200px;
                border: 1px solid black;
                .item {
                    width: 50px;
                    height: 50px;
                    border: 1px solid black;
                    box-sizing: border-box;
                }
            }
5.align-items(cross-axis)：項目 交叉軸對齊方式(單行).  [html結構：1個div(.container)包3個div(.item)]
默認值：stretch：當項目有設定main-size時會失效.
(ps：cross-axis方向 ＝> 從上到下)
1
2
3
                .container {
                    display: flex;
                    flex-direction: row;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
flex-start：往起始邊界對齊
1
2
3
                .container {
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
center：往中間對齊
1
2
3
                .container {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
flex-end：往結束邊界對齊
1
2
3
                .container {
                    display: flex;
                    flex-direction: row;
                    align-items: flex-end;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
baseline：每個項目基線對齊.
(font-size分別為50px 20px 35px.)
1
2
3
                .container {
                    display: flex;
                    flex-direction: row;
                    align-items: baseline;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;
                    
                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
stretch：將項目的cross-size撐開.填滿與容器相同cross-size
1
2
3
                .container {
                    display: flex;
                    flex-direction: row;
                    align-items: stretch;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;
                    
                    .item {
                        width: 50px;
                        // height: 50px; 不設定高度
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
6.align-content：項目 交叉軸對齊方式(多行).  [html結構：1個div(.container)包6個div(.item)]
默認值：stretch：當項目有設定main-size時會失效 .
(ps：main-axis方向 = row => 從左到右)
1
2
3
4
5
6
                    .container {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        width: 200px;
                        height: 200px;
                        border: 1px solid black;
    
                        .item {
                            flex:none;
                            width: 50px;
                            height: 50px;
                            border: 1px solid black;
                            box-sizing: border-box;
                        }
                    }
flex-start:往起始邊界對齊
1
2
3
4
5
6
              .container {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  align-content:flex-start;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      flex: none;
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
center:往中間對齊
1
2
3
4
5
6
              .container {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  align-content:center;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;
                  .item {
                      flex: none;
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
flex-end:往結束邊界對齊
1
2
3
4
5
6
            .container {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  align-content:flex-end;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;
                  .item {
                      flex: none;
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
space-between:第一行靠起始邊界.最後行靠結束邊界.其餘空白平均分配剩下每行左右兩側
1
2
3
4
5
6
7
8
9
10
                .container {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-content:space-between;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        flex: none;
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
stretch
1
2
3
4
5
6
                .container {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-content:stretch;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        flex: none;
                        width: 50px;
                        // height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
7.flex-basis：項目初始大小 (main-size). [html結構：1個div(.container)包3個div(.item)]
默認值 auto 或 0 :項目原始大小
1
2
3
                    .container {
                        display: flex;
                        width: 200px;
                        height: 200px;
                        border: 1px solid black;
    
                        .item {
                            flex:none;
                            width: 50px;
                            height: 50px;
                            border: 1px solid black;
                            box-sizing: border-box;
                        }
                    }
設定項目的main-size為100px;
1
2
3
                      .container {
                          display: flex;
                          width: 200px;
                          height: 200px;
                          border: 1px solid black;
      
                          .item {
                              flex:none;
                              flex-basis:100px;
                              width: 50px;
                              height: 50px;
                              border: 1px solid black;
                              box-sizing: border-box;
                          }
                      }
設定項目的main-size為80%;
1
2
3
                      .container {
                          display: flex;
                          width: 200px;
                          height: 200px;
                          border: 1px solid black;
      
                          .item {
                              flex:none;
                              flex-basis:80%;
                              width: 50px;
                              height: 50px;
                              border: 1px solid black;
                              box-sizing: border-box;
                          }
                      }
8.flex-grow：項目彈性增長比例.  [html結構：1個div(.container)包3個div(.item)]
默認值 0:不做彈性增長
1
2
3
                      .container {
                          display: flex;
                          width: 200px;
                          height: 200px;
                          border: 1px solid black;
      
                          .item {
                              width: 50px;
                              height: 50px;
                              border: 1px solid black;
                              box-sizing: border-box;
                          }
                      }
設定為1時,每個項目平均分配剩餘空白彈性伸展.
1
2
3
                .container {
                    display: flex;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        flex-grow:1;
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
分別做設定,剩餘空白依比例做彈性伸展.
item
item2
item3
                  .container {
                      display: flex;
                      flex-direction: row;
                      flex-wrap: wrap;
                      width: 200px;
                      height: 200px;
                      border: 1px solid black;

                      .item {
                          flex-grow:0;
                          width: 50px;
                          height: 50px;
                          border: 1px solid black;
                          box-sizing: border-box;
                      }

                      .item2 {
                          flex-grow:1;
                          width: 50px;
                          height: 50px;
                          border: 1px solid black;
                          box-sizing: border-box;
                      }

                      .item3 {
                          flex-grow:2;
                          width: 50px;
                          height: 50px;
                          border: 1px solid black;
                          box-sizing: border-box;
                      }
                  }
9.flex-shrink：項目彈性壓縮比例. [html結構：1個div(.container)包3個div(.item)]
默認值 1:依照比例彈性壓縮
1
2
3
                      .container {
                          display: flex;
                          width: 200px;
                          height: 200px;
                          border: 1px solid black;
      
                          .item {
                              width: 100px;
                              height: 50px;
                              border: 1px solid black;
                              box-sizing: border-box;
                          }
                      }
設定為0時,不做彈性壓縮.
1
2
3
                .container {
                    display: flex;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        flex-shrink:0;
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
分別設定彈性壓縮比例.
item
item2
item3
                  .container {
                    display: flex;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        flex-shrink:0;
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item2 {
                        flex-shrink:1;
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item3 {
                        flex-shrink:2;
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
10.order：項目排列順序.  [html結構：1個div(.container)包4個div(.item)]
默認值 0: 按照原始排列順序
1
2
3
4
                .container {
                    display: flex;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
依設定排列權重,遇到一樣大小時,依原始順序為先.
1
2
3
4
                .container {
                    display: flex;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;
                    
                    .item {
                        order:2;
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item2 {
                        order:0;
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item3 {
                        order:1;
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item4 {
                        order:0;
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
              }
11.align-self：項目本身 交叉軸對齊方式(覆蓋容器align-items的設定).  [html結構：1個div(.container)包5個div(.item)]
分別項目cross-axis的對齊方式.
item
item2
item3
item4
item5
item6
                .container {
                    display: flex;
                    align-items:center;
                    width: 400px;
                    height: 400px;
                    border: 1px solid black;
                    
                    .item {
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item2 {
                        align-self: flex-start;
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item3 {
                        align-self: flex-end;
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item4 {
                        align-self: baseline;
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                        font-size:25px;
                        line-height: 50px;
                    }

                    .item5 {
                        align-self: baseline;
                        width: 100px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }

                    .item6 {
                        align-self: stretch;
                        width: 100px;
                        // height: 50px; 拿掉高度
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
12.flex-flow：direction + wrap. [html結構：1個div(.container)包6個div(.item)]
一次設定direction、wrap.
1
2
3
4
5
6
                .container {
                    display: flex;
                    flex-flow: row-reverse wrap;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
13.flex：grow + shrink + basis. [html結構：1個div(.container)包6個div(.item)]
一次設定grow、shrink、basis.
1
2
3
4
5
6
                .container {
                    display: flex;
                    flex-flow: row wrap;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        flex: 0 0 50%;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
              }
flex:initial; = flex:0 1 auto;
1
2
3
4
5
6
                  .container {
                      display: flex;
                      flex-flow: row nowrap;
                      width: 200px;
                      height: 200px;
                      border: 1px solid black;

                      .item {
                          flex:initial;
                          width:50px;
                          height: 50px;
                          border: 1px solid black;
                          box-sizing: border-box;
                      }
                }
flex:none; = flex:0 0 auto;
1
2
3
4
5
6
                    .container {
                        display: flex;
                        flex-flow: row nowrap;v
                        width: 200px;
                        height: 200px;
                        border: 1px solid black;

                        .item {
                            flex:none;
                            width:50px;
                            height: 50px;
                            border: 1px solid black;
                            box-sizing: border-box;
                        }
                  }
flex:auto; = flex:1 1 auto;
1
2
3
4
5
6
                      .container {
                          display: flex;
                          flex-flow: row nowrap;
                          width: 200px;
                          height: 200px;
                          border: 1px solid black;

                          .item {
                              flex:auto;
                              width:50px;
                              height: 50px;
                              border: 1px solid black;
                              box-sizing: border-box;
                          }
                    }
範例一
原始排列
1
2
3
期望排列
1
2
3
原始樣式
1
2
3
              .container {
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                    width: 50px;
                    height: 50px;
                    border: 1px solid black;
                    box-sizing: border-box;
                }
              }
設定排列方式為row
1
2
3
                .container {
                  display: flex;
                  flex-flow: row;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
設定主軸對齊方式為置中
1
2
3
                .container {
                  display: flex;
                  flex-flow: row;
                  justify-content: center;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
設定交叉軸對齊方式為置中
1
2
3
                .container {
                    display: flex;
                    flex-flow: row;
                    justify-content: center;
                    align-items: center;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;

                    .item {
                        width: 50px;
                        height: 50px;
                        border: 1px solid black;
                        box-sizing: border-box;
                    }
                }
設定主軸對齊方式改為space-around
1
2
3
                .container {
                  display: flex;
                  flex-flow: row;
                  justify-content: space-around;
                  align-items: center;
                  width: 200px;
                  height: 200px;
                  border: 1px solid black;

                  .item {
                      width: 50px;
                      height: 50px;
                      border: 1px solid black;
                      box-sizing: border-box;
                  }
              }
範例二
期望排列
header
siderbar
content
footer
html結構 <div class="container">

    <div class="header">header</div>

    <div class="main">

        <div class="siderbar">siderbar</div>

        <div class="content">content</div>

    </div>

    <div class="footer">footer</div>

</div>
原始排列(橘色為main範圍)
header
siderbar
content
footer
                  .container{
                      width: 300px;
                      height: 300px;
                      border: 1px solid #160606;

                      .header{
                          background:greenyellow;
                      }

                      .main{
                          background:orange;

                          .siderbar{
                              //background:orangered;
                          }

                          .content{
                              //background:plum;
                          }
                      }

                      .footer{
                          background:gray;
                      }
                  }
先設定container 與 header、main、footer 的排列
 1.container：設定為column排列.
 2.header：main-size設為50px;
 3.main：設為自動彈性,所以項目的main-size自動增長.
 4.footer：main-size設為50px;
 (align-items默認stretch,所以項目的cross-size自動撐滿.)
header
siderbar
content
footer
                .container{
                    display: flex;
                    flex-direction: column;
                    width: 300px;
                    height: 300px;
                    border: 1px solid #160606;

                    .header{
                        flex: 0 0 50px;
                        background:greenyellow;
                    }

                    .main{
                        flex: auto;
                        background:orange;

                        .siderbar{
                            // background:orangered;
                        }
                        
                        .content{
                            // background:plum;
                        }
                    }

                    .footer{
                        flex: 0 0 50px;
                        background:gray;
                    }
              }
先設定main 與 siderbar、content 的排列
 1.main：設定為row排列.
 2.siderbar：main-size設為70px;
 3.content：設為自動彈性,所以項目的main-size自動增長.
 (align-items默認stretch,所以項目的cross-size自動撐滿.)
 ps:記得 main-size 不要跟 css height/width 搞混了,指的是main-axis方向的大小.
header
siderbar
content
footer
                  .container{
                    display: flex;
                    flex-direction: column;
                    width: 300px;
                    height: 300px;
                    border: 1px solid #160606;

                    .header{
                        flex: 0 0 50px;
                        background:greenyellow;
                    }

                    .main{
                        flex:auto;
                        background:orange;
                        display: flex;
                        flex-flow: row nowrap;

                        .siderbar{
                            flex: 0 0 70px;
                            background:orangered;
                        }

                        .content{
                            flex: auto;
                            background:plum;
                        }
                    }

                    .footer{
                        flex: 0 0 50px;
                        background:gray;
                    }
                }
Copyright © 2017 by JiaHong