如何使用CSS3中的flex对div进行分块展示并布局

生活小百事通 2023年03月27日 阅读 (84)

1、第一步,在已创建好的html5页面,插入四个子div,分别设置class属性,如下图所示:

如何使用CSS3中的flex对div进行分块展示并布局

如何使用CSS3中的flex对div进行分块展示并布局

2、第二步,利用css中的通配符设置全局内外间距,使用外层div标签类选择器设置column-count属性,如下图所示:

如何使用CSS3中的flex对div进行分块展示并布局

3、第三步,保存代码并打开浏览器,查看页面展示的效果,分块展示出来,如下图所示:

如何使用CSS3中的flex对div进行分块展示并布局

4、第四步,利用多层类选择器,设置子div标签的样式属性,display、align-items等,如下图所示:

如何使用CSS3中的flex对div进行分块展示并布局

5、第五步,再次保存代码并查看页面展示的效果,可以发现展示四个颜色块,字体居中显示,如下图所示:

如何使用CSS3中的flex对div进行分块展示并布局

6、第六步,对父子div中的某个属性进行微调,然后再次保存并查看页面效果,如下图所示:

如何使用CSS3中的flex对div进行分块展示并布局

精彩内容尽在问答鸭,如果您觉得这篇内容不错,别忘了分享给好友哦!

相关文章

  • eclipse中的Servers面板消失了怎么办.

    eclipse中的Servers面板消失了怎么办

    1、首先我们找到eclipse中的window选项。2、打开,找到showview.3、再打开,找到other项。

    2022-08-03 阅读 (633)
  • 如何更改Word文档中的百分比堆积条形图格式?.

    如何更改Word文档中的百分比堆积条形图格式?

    1、首先,单击鼠标右键——新建——word文档;2、打开你所要操作的word文档文件;3、找到菜单栏中的“插入”菜单;4、选择子菜单栏中的“图表”图标;5、选择所给“条形图”类型中的百分比堆积条形图;6、图形添加成功;7、点击所添加的图表在工具栏下选择自己需要的格式进行更改即可。

    2022-08-19 阅读 (313)
  • 如何快速批量提取多个Word文档中的图片.

    如何快速批量提取多个Word文档中的图片

    1、例如一个文件夹有两篇word文档多篇也可以哦。2、“文档1”中的图片,如下图所示。3、“文档2”中的图片,如下图所示。

    2022-08-20 阅读 (277)
  • PPT:如何用PPT展示公司资质?.

    PPT:如何用PPT展示公司资质?

    1、将荣誉证书放到ppt中,利用islide工具插件对图片进行矩阵排版。2、全选排列好的图片,ctrl+g进行组合,然后按住shift+鼠标拖动任一顶点进行等比例缩放,缩放到适合版面的大小。

    2022-08-23 阅读 (234)
  • 清理安卓手机中的系统缓存.

    清理安卓手机中的系统缓存

    1、当安卓智能手机长久使用,让系统垃圾过多之后,我们可以找到手机中的手机管家,然后点击进入页面。2、点击扫描功能按钮,进入到扫描功能按钮页面,点击优化。

    2022-07-19 阅读 (176)
  • 怎样把EXCEL、WORD中的表格数据转到CAD表格中.

    怎样把EXCEL、WORD中的表格数据转到CAD表格中

    1、将word表格中的东西粘贴到excel,当然,本来是excel表格就省略这一步吧2、整理excel表格中的内容1、文字整理、修改2、第一行确定单元格中无空单元格,如果有,填入数据进行补充3、确认无合并后的单元格4、删除不需要的行和列5、确认一个excel单元内无换行3、1、在第一列插入空列,填充自然数排序2、数数cad模板上每个表格有几行,我这里有33行3、在相应excel文件的行中我这里在33行插入空行,输入比较明显的数据进行标示4、打开txt文档、计算器5、将excel中的一列数据复制粘贴到txt

    2022-08-31 阅读 (155)
  • Excel2007在一张纸中打印不同表中的表格的方法.

    Excel2007在一张纸中打印不同表中的表格的方法

    1、点击office按钮,选择下边的excel选项—自定义—不在功能区中的命令,在下边的找到照相机—添加—确定。

    2022-08-20 阅读 (109)
  • 色彩提取在PPT中的应用技巧.

    色彩提取在PPT中的应用技巧

    很早前有贴过一篇文章,大概意思是说ppt的功夫在ppt软件之外,现在这篇《色彩提取在ppt中的应用技巧》也应该是ppt之外的功夫吧,很多朋友可能会疑惑,为什么ppt网站要写ps的教程呢,当然,看了这文章你应该也懂了。

    2023-01-04 阅读 (104)
  • 如何快速删除Excel表格中的多个空白行?.

    如何快速删除Excel表格中的多个空白行?

    方法11、对于相对来说数据比较少的表格,比如说就一两页的,对其中的空白格可以全部选中后一起删除,鼠标左键点击每一个空白行最前边的行数,选中该空白行。

    2022-08-17 阅读 (94)
  • 怎么剪裁PDF页面?如何剪裁PDF文件中的页面.

    怎么剪裁PDF页面?如何剪裁PDF文件中的页面

    具体的操作方法1、打开电脑中的pdf编辑器,选择添加事先准备好的pdf文件。2、找到栏目中的文档选项,选择裁剪页面功能,点击之后就可以进入裁剪的页面中了。

    2022-07-04 阅读 (93)