flex佈局開發

flex佈局開發

1. 佈局原理

   • flex時flexible Box的縮寫，意爲「彈性佈局」，用來爲盒子模型提供最大的靈活性，任何一個容器均可以定位flex佈局
   • 【注意】
     • 當咱們爲父盒子設爲flex佈局之後，子元素的float、clear和vertical-align屬性將失效
     • 伸縮佈局=彈性佈局=伸縮盒佈局=彈性盒佈局=flex佈局

2. 常見父項屬性

   • flex-direction：設置主軸的方向

     • flex-direction屬性值決定主軸的方向（及項目的排列方向）

     • 【注意】

       • 主軸和側軸是會變化的，就看flex-diretion設置誰爲主軸，剩下的就是側軸，子元素是跟着主軸來排列的

         屬性值	說明
         row	默認值從左到右
         row-reverse	從右到左
         column	從上到下
         column-reverse	從上到下

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

     • 【注意】

       • 使用這個屬性以前要肯定好主軸是哪一個

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

   • flex-wrap：設置子元素是否換行

     • 屬性值	說明
       nowrap	默認值，不換行
       wrap	換行

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

     屬性值	說明
     flex-start	從上到下
     flex-end	從下到上
     center	垂直居中
     strech	拉伸（默認值）【項目不要給高度】
     space-around	子項在側軸平分剩餘空間
     stretch	設置子項元素高度平分元素高度

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

     屬性值	說明
     flex-start	從上到下
     flex-end	從下到上
     center	垂直居中
     strech	拉伸（默認值）【項目不要給高度】

   • flex-flow：複合屬性，至關於同時設置了flex-direction和flex-wrap

3. 子項常見屬性

   • flex子項佔的分數

     .item{
     flex:<number>;
     }

   • align-self控制子項子級在側軸的排列方式

     • align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性

     默認值是auto，表示繼承父元素align-items屬性，若是沒有父元素，則等同於stretch

   • order屬性定義子項的排列順序（先後順序）

     • 數值越小排列越靠前