成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用 Flexbox 實現(xiàn)一個網(wǎng)格系統(tǒng)

seasonley / 3135人閱讀

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

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

    

      
Hello World

    

    

      
Hello World

    

    

      
Hello World

    

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

.columns{
  display: flex;
}

.column {
  flex: 1
}

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

2. 指定元素占據(jù)一定的寬度

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

指定元素占據(jù)的列數(shù)

當總的列數(shù)加起來超過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-*的定義一方面通過百分比指定了寬度，另一方面重要的是設(shè)置了flex:none，否則元素就還是會采用平分寬度的方法而非指定。

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

3. 元素占據(jù)原本的寬度 
  

    

      
Hello World

    

    

      
Hello World

    

    

      
Hello World

    

  
.columns{
  display: flex;
}

.column {
  flex: 1
}

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

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

參考

Laracasts

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115536.html

相關(guān)文章

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

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

    wums 評論0 收藏0

  • [譯]CSS Grid, Flexbox 和 Box Alignment:網(wǎng)頁布局的新系統(tǒng)

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

    Alan 評論0 收藏0

  • CSS Grid 系列(上)-Grid布局完整指南

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

    yy13818512006 評論0 收藏0

  • 你不需要基于 CSS Grid 的柵格布局系統(tǒng)

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

    anonymoussf 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<