如何使用CSS3中的属性flex-direction实现排列
1、第一步，在HBuilder工具中，新建静态页面，并在<body></body>插入四个div元素，如下图所示：
2、第二步，利用column类选择器设置display为flex，接着使用元素div选择器设置字体属性、宽度、高度和边框，如下图所示：
3、第三步，保存代码并在浏览器中预览界面效果，可以看到四个虚线框，如下图所示：
4、第四步，利用column类选择器，添加属性flex-direction，设置对应值为column，如下图所示：
5、第五步，再次保存代码并在浏览器中查看效果，可以发现方向转换为垂直方向，如下图所示：
6、第六步，最后将flex-direction属性值修改为column-reverse，查看效果可以发现方向还是垂直方法，内容发生改变，如下图所示：
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：174
阅读量：61
阅读量：45
阅读量：81
阅读量：112