基於flex-flow:column, 實現"商城分類頁"充滿屏幕高度

原由

早上看羣裏有人問如何讓"商城分類頁"在數據很少的狀況下充滿屏幕高度.

第一次回答(calc)

相信你們的第一反應就是calc(100vh - 頭高度), 我也是, 而後寫了個demo:

第二次回答(flex-flow:column)

可是人家說頭高度是padding撐起的沒有具體高度, 好吧看來只能用flex-flow:column了.
簡單說下flex-flow:column, 默認flex都是x軸佈局, 聲明爲column後就變成y軸佈局, 這樣就能夠藉助flex自動填充剩餘的特性佔滿高度:

<main>
  <header>我是標題</header>

  <article>
    <aside>
      側邊欄, 我是藍色
    </aside>

    <article>
      我背景是紅色
    </article>
  </article>
</main>

main {
  display: flex;
  flex-flow: column;
  height:100vh;
  header {
    padding: 15px;
    background: #fff;
  }
  > article {
    flex:1;
    display: flex;

    aside {
      padding: 15px;
      background: #00f;
    }

    article {
      flex: 1;
      background: red;
    }
  }
}

點擊預覽

最後

沒啥複雜的代碼, 就是感受比較常見, 可能對新手有幫助, 分享出來拋磚引玉, 由於我只是測試了微信瀏覽器, 其餘的第三方瀏覽器沒有嘗試(好比uc), 若是路過的大神有兼容更好的代碼還請不吝賜教.

由於就是寫個demo, 因此也沒有把老的flex語法加上, 如今都是腳手架開發, 編譯的時候自動會給加上, 或者本身配置下相應的插件, 感謝閱讀, 但願能幫助到你.

微信羣

感謝你們的閱讀, 若有疑問能夠加羣🚀, 羣裏有好多有趣的前端的小夥伴, 讓咱們共同窗習成長吧!

也可加我微信, 我拉你進入微信羣(因爲騰訊對微信羣的100人限制, 超過100人後必須由我拉進去)