flex 提高布局效率

flex为盒模型提高灵活性

开发工具与关键技术:DW提高布局效率
作者:熊琪
撰写时间:2019年1月16日

对于前端开发的初学者来说都是依赖 display 属性 + position属性 + float属性从而得到想要的布局。
但它对于那些特殊布局非常不方便,比如你想要实现垂直居中就不是那么容易了。
flex能帮你实现,
Flexible Box 简称 flex,它已经得到了所有浏览器的支持
样式效果截图:
在这里插入图片描述
中间圆点就是用flex属性而得来的,代码写法截图:
在这里插入图片描述在这里插入图片描述 在这里插入图片描述

注释:flex-direction: column(主轴为垂直方向,起点在上沿;如果不设置这属性其默认主轴方向为夫级元素的X轴方向)
Justify-content:space-between;(两端对齐,项目之间的间隔都相等)
Justify-content有四个属性分别是在主轴方向的左对齐,右对齐,中间对齐和两端对齐;
值分别为:flex-start,flex-end,center;space-between。
运用熟练可以事半功倍哦!

事例截图
在这里插入图片描述
在这里插入图片描述
只需两句代码就可以得到想要的样式哦!
得到的样式效果截图:
在这里插入图片描述

                                                           ( 期待大师的讨论与指点!)

猜你喜欢

转载自blog.csdn.net/weixin_44546735/article/details/86514996