摘要：屬性定義了多根軸線的對(duì)齊方式。負(fù)值對(duì)該屬性無效。屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋屬性。默認(rèn)值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。

本文主要記錄一些自己遇見的flex布局案例

簡單回顧一下flex常用屬性

6個(gè)常用的容器屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）
flex-wrap默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

6個(gè)常用的元素屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。(如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。)flex：1 等價(jià)于 flex-grow: 1

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。(如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。負(fù)值對(duì)該屬性無效。)
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。(它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。)
order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

關(guān)于更詳細(xì)的基礎(chǔ)知識(shí)，放幾個(gè)我收藏的鏈接吧

Flex-彈性布局原來如此簡單！

30 分鐘學(xué)會(huì) Flex 布局

演示：Flexbox演示站

  

      
header：height = 100px
      
conent：height = auto
      
  

.flexContainer{
    display: flex;
    height: 100%; //要指定高度
    flex-direction: column; //布局從上到下排列
}    
.header,.footer{
    font-size: 18px;
    display: flex; // 這是是為居中 文字的 
    justify-content: center; // 文字 水平居中
    align-items: center;  // 文字垂直居中
}    
.header{
    height: 100px;
    background: #665aa4;
}    
.main{
    flex-grow: 1; // 不知道和 flex: 1 有啥區(qū)別
    text-align: center;
    background: #3dc95d;
}    
.footer{
    height: 100px;
    background: #fc430b;
}    

    conent：height = auto
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
    

//styl,我就不給大家手動(dòng)轉(zhuǎn)成css了
.main
  flex 1
  text-align: center
  background: #3dc95d
  .main-body
    display: flex  //關(guān)鍵
    flex-wrap: wrap //關(guān)鍵
    .main-item
      flex-grow:1 //關(guān)鍵  基礎(chǔ)知識(shí)介紹過了 再來一邊 定義元素的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
      min-width: 30% //關(guān)鍵  width: 30%跟flex-basis:30%;（flex: 0 0 30%）作用是相同的，我是這么理解
      max-width: 100% //關(guān)鍵  min-width 和  max-width 只是讓元素變得更響應(yīng)而已
      margin: 15px
      height: 30px
      border: 1px red solid
      background: #ccc
      text-align: center

完全響應(yīng)式的，你可以改變游覽器窗口的寬度，也可以改變.main-item個(gè)數(shù)

思路來源：記工作中遇到一件...

  
conent：height = auto
  
header：height = 100px
  

.flexContainer{
  display:flex;
  height:100vh;
}
.footer{
  width:50px;
  background #CCC
}
.main{
  flex-grow:1;
  background #3dc95d
}
.header{
  width 150px;
  background #665aa4
  order:-1;//使得order處于最左側(cè)(html中main寫在了最前，以利于優(yōu)先加載主內(nèi)容區(qū))
}

    
1
    
2
    
3
    
4
    
5
    
6

.container{
    display: flex;
    justify-content: space-around; //使主軸方向的多余空間平均分配在兩兩item之間
    flex-wrap: wrap; // 子元素每行填滿時(shí)會(huì)自動(dòng)換行
}
.item{
    width: 30%;  //（絕大多數(shù)情況）同 flex: 0 0 30%;
    min-width: 400px; // 每一個(gè)子元素最小寬度
    max-width: 420px; // 每一個(gè)子元素最大寬度
    min-height: 360px;
}    

在使用了justify-content:space-around、justify-content: center 或者 justify-content: space-between后有個(gè)問題，看最后一張圖最后一排，我想讓它按著順序排怎么辦

解決方法一

// 在列表結(jié)尾增加一系列空標(biāo)簽，
// 數(shù)量我覺得最好是 一行最大容量 - 1
// 因?yàn)檫@子元素個(gè)數(shù)可能是不確定的




//在css里做如下定義：
//根據(jù)自己實(shí)際情況，有時(shí)候可以不添加布局上也不會(huì)有影響
.item:empty {
    height: 0;
    min-height: 0px; // 當(dāng)然要記得把這些元素重置
    border: none; // 這些
    padding: 0.......
}
// 當(dāng)然你也可以不用 .item這個(gè)類名，隨便換一個(gè)
//.fix {
//  width: 30.333333%;
//  height:0;
//  margin: 0;
//}

缺點(diǎn)就是加了額外空標(biāo)簽

效果還算滿足要求

解決方法二：

.container{
  display: flex;
  flex-wrap: wrap;
  background: red;
}
.item{
  box-sizing: border-box; 
  width: 30.333333%;
  margin: 10px 1.5%;
  background:#eee;
  height: 120px;
}

這種方法也能實(shí)現(xiàn)響應(yīng)式，但是如果你.item的子元素的寬度不能小于或大與某個(gè)固定寬度，換句話說就是設(shè)置min-width或max-width就會(huì)出現(xiàn)不能均勻沾滿一行的情況

這是目前我知道的兩種好用的方法，根據(jù)自己的實(shí)際情況選擇吧，如果你有idea歡迎留言討論

  

    
      電壓等級(jí)分布
    
  
  
  





    

      
        行業(yè)分類分布
      
    
    
    





    

      
        電源數(shù)量分布
      
    
    
    

// stylus
.pieItem
  width: 33.333%
  min-width: 400px
  max-width: 50%
  box-sizing: border-box
  .pieDiv
    height: 360px
  &:not(:nth-child(3n))
    .pieDiv::after
      content: ""
      width: 1px
      position: absolute
      height: 360px
      top 50%
      right 0
      transform: translate(0, -50%)
      background: #ccc
      background: -webkit-gradient(radial, 0 180, 0, 0 180, 180, from(#ffffd), to(rgba(0,0,0,0)))