用 css 控制网格自动分布布局事例分享

       在初学 css  的时辰我们做网格一般是用 表格 属性来做的，可是也可以用 div 的嵌套实现 网格结构，这里小编进修了用伸缩盒来做网格，给大师分享一下本身的事例；

东西/原料

• 电脑
• Sublime text 2

方式/步调

1. 1

   需要的架构是必然，这里就用一个 年夜的 div 包含 中div ，中div中在包含几个小的div（嵌套）

   
2. 2

   然后我们用css节制一下 年夜的div ，节制网格在页面的位置和一些需要的样式；

   .D｛ box-shadow｝，这个是节制 年夜div 边框暗影的；

   中 div由选择器  .d1 .d2 .d3 节制，

   display：flex；将这些 中div 变为伸缩盒 模子；

   
3. 3

   然后我们在将 一个一个的网格的样式做好 ，如图一的代码（一些小问题，没有将样式代码归并，大师懂就行...）

   我们做的是主动分派的 网格宽度 ，所以 并没有设置 每一个小div的宽度

   
4. 4

   然后节制第一行的三网格宽度；

   （flex属性是flex-grow ，flex-shrink，flex-basis的缩写）

   第一个div占一半，残剩两个等分残剩空间；

   
5. 5

   节制第二行网格的占比；

   第二个占了 三分之一；

   第一个占残剩的空间

   
6. 6

   第三行网格，

   第一个和第三个网格，占固心猿意马比例

   第二个占残剩的空间

   （不清晰的话可以查阅先关资料，都可以找到）

   

注重事项

• 仅作分享；