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 設置誰爲主軸，剩下的就是側軸。而咱們的子元素是跟着主軸來排列的

屬性	描述
row	默認值從左到右
row-reverse	從右到左
column	從上到下
column-reverse	從上到下

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

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

屬性	描述
flex-start	默認值從頭部開始 若是主軸是x軸, 則從左到右
flex-end	從尾部開始排列
center	從主軸居中對齊
space-around	平分剩餘空間
space-between	先兩邊貼邊 再平分剩餘空間

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

flex-wrap設置是否換行

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

屬性	描述
nowrap	默認值 不換行
wrap	換行

div {
    display: flex;
    /* flex佈局中，默認的子元素是不換行的， 若是裝不開，會縮小子元素的寬度，放到父元素裏面  */
    flex-wrap: nowrap;
}

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

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

屬性	描述
flex-start	默認值從頭部開始
flex-end	從尾部開始排列
center	居中顯示
stretch	拉伸

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

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

屬性	描述
flex-start	默認值 從側軸頭部開始
flex-end	從側軸的尾部開始排列
center	從主軸居中對齊
space-around	子項在側軸平分剩餘空間
space-between	子項在側軸先兩邊貼邊 再平分剩餘空間
stretch	設置子項元素高度平分父元素高度

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>; 
}