用 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
- 阅读 ( 707 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章