用 css 控制網格自動分布布局事例分享
在初學 css 的時辰我們做網格一般是用 表格 屬性來做的，可是也可以用 div 的嵌套實現 網格結構，這里小編進修了用伸縮盒來做網格，給大師分享一下本身的事例；
東西/原料
- 電腦
- Sublime text 2
方式/步調
- 1
需要的架構是必然，這里就用一個 年夜的 div 包含 中div ，中div中在包含幾個小的div（嵌套）
- 2
然后我們用css節制一下 年夜的div ，節制網格在頁面的位置和一些需要的樣式；
.D｛ box-shadow｝，這個是節制 年夜div 邊框暗影的；
中 div由選擇器 .d1 .d2 .d3 節制，
display：flex；將這些 中div 變為伸縮盒 模子；
- 3
然后我們在將 一個一個的網格的樣式做好 ，如圖一的代碼（一些小問題，沒有將樣式代碼歸并，大師懂就行...）
我們做的是主動分派的 網格寬度 ，所以 并沒有設置 每一個小div的寬度
- 4
然后節制第一行的三網格寬度；
（flex屬性是flex-grow ，flex-shrink，flex-basis的縮寫）
第一個div占一半，殘剩兩個等分殘剩空間；
- 5
節制第二行網格的占比；
第二個占了 三分之一；
第一個占殘剩的空間
- 6
第三行網格，
第一個和第三個網格，占固心猿意馬比例
第二個占殘剩的空間
（不清晰的話可以查閱先關資料，都可以找到）
注重事項
- 僅作分享；
- 發表于 2018-04-11 00:00
- 閱讀 ( 633 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章