flex布局和position定位的使用选择

407 阅读1分钟

在css样式的使用中,很多时候flex或者position的使用并没有规定特别的适用范围,但是我们在使用的时候,应该要有选择性的使用,那大概的依据又是什么呢?如果非必要的情况下尽量不要使用position,为什么呢?
1. 从他们的定义入手,flex和position分别为布局和定位,其中的position属性的定义为

CSS position 属性用于指定一个元素在文档中的定位方式。toprightbottom 和 left 属性则决定了该元素的最终位置

而flex呢

设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间

从定义上可以看出,flex主要用于整个项目的空间分配等,而position则更倾向于将单独的某个元素放置在特定的位置上,所以在整体的布局方面,应该更多的使用flex,而不是使用position来还原ui图,position更多的应该是用来固定一些类似于小图标或者icon的东西

2. 如果过多的使用position将会面临的一个问题就是页面的自适应性极低,当你完成了一个页面后,如果设计的交互发生了改变,此时你必须重新计算每一个元素的top、right、bottom和left,相比之下flex的自适应性将会更好,也将更加有利于后来人接手你的项目