布局

bergwhite 發(fā)布于2019-08-20 16:44 / 2170人閱讀

摘要：多列內(nèi)容固定分布需求三列內(nèi)容固定寬度并排顯示知識點(diǎn)彈性布局項(xiàng)目的屬性設(shè)置定義項(xiàng)目放大比列，默認(rèn)值有剩余空間不放大定義項(xiàng)目縮小比列，默認(rèn)值空間不足縮小設(shè)置項(xiàng)目在主軸的大小，默認(rèn)值為跟或?qū)傩灾狄粯颖热缭搶傩杂袃蓚€快捷值和建議優(yōu)先使用

多列內(nèi)容固定分布

http://www.ruanyifeng.com/blo...
https://developer.mozilla.org...

1. 需求

三列內(nèi)容固定寬度并排顯示
280px 414px 56px

2. 知識點(diǎn)

彈性布局項(xiàng)目的flex屬性設(shè)置

flex-grow 定義項(xiàng)目放大比列，默認(rèn)值0有剩余空間不放大

flex-shrink 定義項(xiàng)目縮小比列，默認(rèn)值1空間不足縮小

flex-basis 設(shè)置項(xiàng)目在主軸的大小，默認(rèn)值為auto跟width或height屬性值一樣(比如350px)

flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)

建議優(yōu)先使用這個屬性，而不是多帶帶寫三個分離的屬性，因?yàn)闉g覽器會推算相關(guān)值

3. 代碼


  1111
  2222
  3

瀑布流

方法1: 插件

https://masonry.desandro.com/ 類似pinterest的布局模式

gutter、columnWidth

方法2: css column

方便，但是數(shù)據(jù)會被分成左右兩列顯示（數(shù)據(jù)不是按先后順序排列的
）

column-count: 2;
column-width: 4.58666667rem;
column-gap: .18666667rem;

GPU云服務(wù)器云服務(wù)器 div布局布局html 排版布局拖動布局幀布局

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

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

相關(guān)文章

實(shí)現(xiàn)三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

golden_hamster 2019-08-02 11:55 評論0 收藏0
實(shí)現(xiàn)三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

IamDLY 2019-08-29 17:12 評論0 收藏0
實(shí)現(xiàn)三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

Hegel_Gu 2019-08-23 12:52 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。圣杯布局圣杯布局dom結(jié)構(gòu)：圣杯布局 ...

yankeys 2019-08-29 13:54 評論0 收藏0
CSS三欄布局——多種方法詳解，比較兼容性

摘要：題目假設(shè)高度已知，請寫出三欄布局，其中左欄右欄寬度各為，中間自適應(yīng)三欄布局的種方案這是一道經(jīng)典的面試題，下面記錄了布局的種方法。題目:假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應(yīng). 三欄布局的5種方案這是一道經(jīng)典的面試題，下面記錄了css布局的5種方法。三欄布局 * { margin: 0; ...

馬忠志 2019-08-30 10:57 評論0 收藏0