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

2022-05-07 小知识

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

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

文章插图

需要这些哦
电脑
Sublime text 2
方式/
1需要的架构是必然，这里就用一个年夜的 div 包含中div ，中div中在包含几个小的div（嵌套）

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

文章插图

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

文章插图

2然后我们用css节制一下年夜的div ，节制网格在页面的位置和一些需要的样式；
.D｛ box-shadow｝，这个是节制年夜div 边框暗影的；
中 div由选择器 .d1 .d2 .d3 节制，
【用 css 控制网格自动分布布局事例分享】display：flex；将这些中div 变为伸缩盒模子；

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

文章插图

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

文章插图

3然后我们在将一个一个的网格的样式做好，如图一的代码（一些小问题，没有将样式代码归并，大师懂就行...）
我们做的是主动分派的网格宽度，所以并没有设置每一个小div的宽度

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

文章插图

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

文章插图

4然后节制第一行的三网格宽度；
（flex属性是flex-grow ，flex-shrink，flex-basis的缩写）
第一个div占一半，残剩两个等分残剩空间；

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

文章插图

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

文章插图

5节制第二行网格的占比；
第二个占了三分之一；
第一个占残剩的空间

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

文章插图

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

文章插图

6第三行网格，
第一个和第三个网格，占固定比例
第二个占残剩的空间
（不清晰的话可以查阅先关资料，都可以找到）

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

文章插图

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

文章插图

推荐阅读

上一篇：怎样卸载微软 Windows 10 易升

下一篇：笔记本怎么和台式电脑连接