前端基本功-響應式佈局(flex)

時間 2019-11-06

標籤前端基本功響應佈局 flex 欄目 Flex 简体版

原文原文鏈接

本文主要記錄一些本身碰見的flex佈局案例css

簡單回顧一下flex經常使用屬性html

6個經常使用的容器屬性git

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

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

flex-wrap默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

justify-content屬性定義了項目在主軸上的對齊方式。

align-items屬性定義項目在交叉軸上如何對齊。

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

6個經常使用的元素屬性github

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。(若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。)flex：1 等價於 flex-grow: 1

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。(若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。負值對該屬性無效。)

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。(它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。)

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

關於更詳細的基礎知識，放幾個我收藏的連接吧web

演示：Flexbox演示站瀏覽器

1.上中下佈局，中間自適應

<div class="flexContainer">
      <header class="header">header：height = 100px</header>
      <main class="main">conent：height = auto</main>
      <footer class="footer">footer：height = 100px</footer>
  </div>

.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 有啥區別
    text-align: center;
    background: #3dc95d;
}    
.footer{
    height: 100px;
    background: #fc430b;
}

2.實現多個元素寬度平分父級,且可配置一行最多展現多少個元素

<main class="main">
    conent：height = auto
    <div class="main-body">
      <div class="main-item">1</div>
      <div class="main-item">2</div>
      <div class="main-item">3</div>
      <div class="main-item">4</div>
      <div class="main-item">5</div>
      <div class="main-item">6</div>
      <div class="main-item">7</div>
    </div>
</main>

//styl,我就不給你們手動轉成css了
.main
  flex 1
  text-align: center
  background: #3dc95d
  .main-body
    display: flex  //關鍵
    flex-wrap: wrap //關鍵
    .main-item
      flex-grow:1 //關鍵  基礎知識介紹過了 再來一邊 定義元素的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
      min-width: 30% //關鍵  width: 30%跟flex-basis:30%;（flex: 0 0 30%）做用是相同的，我是這麼理解
      max-width: 100% //關鍵  min-width 和  max-width 只是讓元素變得更響應而已
      margin: 15px
      height: 30px
      border: 1px red solid
      background: #ccc
      text-align: center

徹底響應式的，你能夠改變遊覽器窗口的寬度，也能夠改變.main-item個數ide

思路來源：記工做中遇到一件...佈局

3.聖盃佈局

<div class="flexContainer">
  <main class="main">conent：height = auto</main>
  <header class="header">header：height = 100px</header>
  <footer class="footer">footer：height = 100px</footer>
</div>

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

4.每行間距均勻分配，並自動換行的列表項

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

.container{
    display: flex;
    justify-content: space-around; //使主軸方向的多餘空間平均分配在兩兩item之間
    flex-wrap: wrap; // 子元素每行填滿時會自動換行
}
.item{
    width: 30%;  //（絕大多數狀況）同 flex: 0 0 30%;
    min-width: 400px; // 每個子元素最小寬度
    max-width: 420px; // 每個子元素最大寬度
    min-height: 360px;
}

在使用了justify-content:space-around、justify-content: center 或者 justify-content: space-between後有個問題，看最後一張圖最後一排，我想讓它按着順序排怎麼辦post

解決方法一flex

// 在列表結尾增長一系列空標籤，
// 數量我以爲最好是 一行最大容量 - 1
// 由於這子元素個數多是不肯定的

<div class="item"></div>
<div class="item"></div>

//在css裏作以下定義：
//根據本身實際狀況，有時候能夠不添加布局上也不會有影響
.item:empty {
    height: 0;
    min-height: 0px; // 固然要記得把這些元素重置
    border: none; // 這些
    padding: 0.......
}
// 固然你也能夠不用 .item這個類名，隨便換一個
//.fix {
//  width: 30.333333%;
//  height:0;
//  margin: 0;
//}

缺點就是加了額外空標籤

效果還算知足要求

解決方法二：

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

這種方法也能實現響應式，可是若是你.item的子元素的寬度不能小於或大與某個固定寬度，換句話說就是設置min-width或max-width就會出現不能均勻沾滿一行的狀況

這是目前我知道的兩種好用的方法，根據本身的實際狀況選擇吧，若是你有idea歡迎留言討論

5.每一個區塊之間用豎線分割，如圖

<!--html 結構-->
<!--電壓等級分佈-->
<div class="pieItem">
  <div class="pieTitle">
    <span>
      電壓等級分佈
    </span>
  </div>
  <!--餅圖-->
  <div class="pieDiv" id="voltageLevel"></div>
</div>

<!--行業分類分佈-->
<div class="pieItem">
    <div class="pieTitle">
      <span>
        行業分類分佈
      </span>
    </div>
    <!--餅圖-->
    <div class="pieDiv" id="category"></div>
</div>

<!--電源數量分佈-->
<div class="pieItem">
    <div class="pieTitle">
      <span>
        電源數量分佈
      </span>
    </div>
    <!--餅圖-->
    <div class="pieDiv" id="powerSupply"></div>
</div>

// 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(#ddd), to(rgba(0,0,0,0)))