使用 Flexbox 實現一個網格系統

seasonley 發布于2019-08-30 13:46 / 3121人閱讀

摘要：一行的元素平分整行寬度最重要的一點是給這一行的父元素的直接子元素設置。指定元素占據一定的寬度這里我們按照常用的列網格系統來計算。第二點是給了一個輔助類。添加類，前后兩個元素就占據本來的寬度，而中間那個元素就會占據剩余的寬度。

1. 一行的元素平分整行寬度

  
    
      Hello World
    
    
      Hello World
    
    
      Hello World

.box {
  padding: 20px;
  border: 1px solid #ffffd;
}

.columns{
  display: flex;
}

.column {
  flex: 1
}

最重要的一點是給這一行的父元素(columns)的直接子元素(column)設置flex: 1。這樣元素才會平分整行空間，否則就只會占據元素本身的大小，擠在一起。

2. 指定元素占據一定的寬度

這里我們按照常用的12列網格系統來計算。那么我們有以下幾個需求：

指定元素占據的列數

當總的列數加起來超過12時，自動切換到下一行

  
    
      Hello World
    
    
      Hello World
    
    
      Hello World
    
    
      Hello World

.columns{
  display: flex;
}
.columns.is-multiline{
  flex-wrap: wrap;
}

.column {
  flex: 1
}

.column.is-6 {
  width: 50%;
  flex: none;
}

.column.is-2{
  width: 16.66667%;
  flex: none;
}

.column.is-10 {
  width: 83.333%;
  flex:none;
}

這里的重點是給column一個輔助類is-*, is-*的定義一方面通過百分比指定了寬度，另一方面重要的是設置了flex:none，否則元素就還是會采用平分寬度的方法而非指定。

第二點是給了columns一個輔助類is-multiline。is-multiline的作用是設置了flex-wrap: wrap。如果沒有這個屬性，超出12列的寬度之后，這些列就不會向下走，而是再向右延伸。

3. 元素占據原本的寬度

  
    
      Hello World
    
    
      Hello World
    
    
      Hello World

.columns{
  display: flex;
}

.column {
  flex: 1
}

.column.is-narrow{
  flex:none;
}

這里我們給希望只占據元素本來的寬度的column一個輔助類is-narrow。它設置了flex:none這個屬性，否則的元三個元素就會平分整行的寬度。添加is-narrow類，前后兩個元素就占據本來的寬度，而中間那個元素就會占據剩余的寬度。

參考

Laracasts

GPU云服務器云服務器實現一個webrtc flexbox java實現一個線程 FlexBox詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115536.html

Flexbox 很棒，但有些情況不適用

摘要：其設計初衷并不是完備的網格系統。所以禁止將其作為一個完整的網格系統使用。但貓有四條腿，而人類只有兩條。總而言之，還是很棒的真的很有用。對大部分的人來說（如果你寫過CSS），Flexbox 可以說是完美，但它是否適合所有場景呢？簡而言之，我會給出幾種可用的場景，需要你重新思考 Flexbox 模型的使用。順便說一句，本人是 Flexbox 的忠實粉絲，曾寫過一篇 Flexbox 詳...

wums 2019-08-29 18:38 評論0 收藏0
[譯]CSS Grid, Flexbox 和 Box Alignment:網頁布局的新系統

摘要：原文標題原文鏈接在網頁上布局是很費勁的。的新值和都是屬性的新值。再一次，很明顯地看到，布局有一些默認的行為。在網格布局中我們可以看到相同的效果。在這種情況下，容器的高度由項的最大高度決定。我們可以將項按照列擺放而不是行。原文標題：CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout 原文鏈接：https...

Alan 2019-08-29 11:32 評論0 收藏0
CSS Grid 系列(上)-Grid布局完整指南

摘要：瀏覽器已經宣布將支持標準的語法，但暫未支持。重復網格區域的名稱導致內容擴展到這些單元格。點號表示一個空單元格。中間一行將由兩個區域一個空單元格和一個區域組成。只要這些點號之間沒有空格，他們就代表了一個單一的單元格。 by Chris House 譯者：若愚老師想要更好的閱讀體驗可在饑人谷技術博客查看原文 CSS 網格布局(Grid Layout) 是CSS中最強大的布局系統。這是一...

yy13818512006 2019-08-29 14:16 評論0 收藏0
你不需要基于 CSS Grid 的柵格布局系統

摘要：在過去的幾個星期里，我開始看到基于的布局框架和柵格系統的出現。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在過去的幾個星期里，我開始看到基于 CSS Grid 的布局框架和柵格系統的出現。我們驚訝它為什么出現的這么晚。但除了使用 CSS Gr...

anonymoussf 2019-08-01 17:20 評論0 收藏0