如何使用CSS3中的flex属性控制元素分块显示

 时间:2024-09-20 20:22:10

在CSS3中,新增盒子模型属性,可以用属性控制元素分块显示;可以水平展示,也可以是诈魄器虞垂直展示。那么,具体怎么使用呢?

如何使用CSS3中的flex属性控制元素分块显示

工具/原料

Windows7

CSS3

HTML5

HBuilderX

方法/步骤

1、第一,打开HBuilderX工具,新建页面文件,然后在body插入八个div标签

如何使用CSS3中的flex属性控制元素分块显示

2、第二,利用div标签选择器,设置元素宽度、高度、背景色和外边距

如何使用CSS3中的flex属性控制元素分块显示

3、第三,保存代码并打开浏览器,查看界面效果,可以发现垂直显示的几个块

如何使用CSS3中的flex属性控制元素分块显示

4、第四,接着添加属性display,设置为flex,还有兼容谷歌浏览器的-webkit-flex

如何使用CSS3中的flex属性控制元素分块显示

5、第五,添加属性flex-direction,这个属性的值可以是row或column,设置为column

如何使用CSS3中的flex属性控制元素分块显示

6、第六,在八个div外层添加父div,然后利用父类选择器,设置display属性;保存代码并孀砌湫篡刷新浏览器,可以看到垂直分布变为水平分布

如何使用CSS3中的flex属性控制元素分块显示

onchange()事件不触发 不起作用 查看android手机的界面布局 两种纯html+css3实现六边形 如何用visual studio2017编写简单C语言程序 html实例教程:[9]html分屏
热门搜索
金融图片 丹毒图片 中国新闻图片网 二次元少女邪恶漫画 斗罗漫画