flex佈局

flex佈局原理

• flex 是Flexible Box的縮寫,意思是'彈性佈局', 用來為盒模型提供最大的靈活性,任何一個容器都可以指定為flex佈局
• 當為父盒子設為flex佈局後, 子元素的float, clear 和 vertical-align屬性將失效
• flex佈局又叫彈性佈局, 伸縮佈局, 伸縮盒佈局, 彈性盒佈局
• 採用flex 佈局的元素, 稱為flex 容器. 它的所有子元素自動成為容器成員,成為flex項目

flex 父項常見屬性

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

flex-direction: 設置主軸的方向

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

• 預設側軸方向就是 y 軸方向，水平向下

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

div {
    display: flex;
    flex-direction: column; /*設置主軸為垂直*/
}

justify-content: 設置主軸上的子元素排列方式

div {
    display: flex;
    justify-content: space-between; /* 先兩邊貼邊， 在分配剩餘的空間 */
}

flex-wrap設置是否換行

• 預設情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex佈局中預設是不換行的。

div {
    display: flex;
    /* flex佈局中，預設的子元素是不換行的， 如果裝不開，會縮小子元素的寬度，放到父元素裡面  */
    flex-wrap: nowrap;
}

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

• 該屬性是控制子項在側軸（預設是y軸）上的排列方式 在子項為單項（單行）的時候使用

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

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

flex-flow: 是 flex-direction 和 flex-wrap 屬性的複合屬性

flex-flow: row  wrap;

flex 子項常見屬性

flex: 定義子項目分配剩餘空間，用flex來表示占多少份數

.item {
    flex: <number>; /* 預設值 0 */
}

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

• align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性
• 預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch

span:nth-child(2) {
    /* 設置自己在側軸上的排列方式*/
    /*  還會占用原位置,不會影響其餘子項 */
    align-self: flex-end;
}

order 屬性定義項目的排列順序

• 預設值 0 決定了某個子項在其餘兄弟子項的排列順序 >0 順序靠後 <0 順序向前

.item {
    order: <number>; 
}