最新文章
flex弹性盒子理解与使用
发布时间:2019-05-15
热度:
在移动网站开发中,特别流行的布局方式之一,就是用flex弹性盒子布局,接下来就由石家庄网站建设工程师为大家详细介绍。
Flexbox Layout,俗称Flexible box模型,由W3C于2009年开始起草的css3布局样式。它旨在提供一种更加有效的布局方式,控制父容器中子元素的布局,排列以及分布,甚至在它们的尺寸未知或动态变化的情况下,都能够做到正确的展现(弹性盒子中的flex也由此而得名)。
弹性盒子的核心概念是父容器拥有能够改变其子元素的的宽度/高度和排列顺序,使得子元素能够以最佳的尺寸填充整个父容器的可用空间。简单来说,一个弹性盒子能够充分扩展它的子元素尺寸使其填满自身的可用空间,或者收缩子元素来防止溢出。
最重要的一点是,相对于传统的块布局block以及行布局inline来说,弹性盒子模型是方向不可知的(direction-agnostic)。尽管块布局以及行布局能够很好的满足页面布局,但是它们缺乏弹性,不能很好地支持大型或者是复杂的应用(特别在屏幕进行横竖屏切换,改变视图尺寸,延伸,收缩等等复杂情景下)。
注意:弹性盒子布局适合作用在一个应用的组件和小范围的布局,例如,一个歌曲列表,一个导航条,等等。相对的,Grid layout,即栅格布局则倾向于进行大规模的界面布局,例如,整体界面的分栏布局,左右结构,上下结构,等等
Flex布局实现垂直与水平居中:
以上关于flex弹性盒子理解与使用均属石家庄网站建设工程师的个人观点,大家如果对此有着不同的见解,可以关注公众号“尚武科技派”给我留言,大家可以交流一下自己的心德体会,共同学习进步。