尚武科技——负责任的企业公民

电话

电话咨询

pHONE CONSulTING

0311-83796180

QQ

在线咨询

ONliNE CONSulTING
百度商桥
科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告

尚武科技春节放假公告    2024-02-03

尚武科技服务热线:0311-
 83796180
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
flex弹性盒子理解与使用

  

  在移动网站开发中,特别流行的布局方式之一,就是用flex弹性盒子布局,接下来就由石家庄网站建设工程师为大家详细介绍。

 

  Flexbox Layout,俗称Flexible box模型,由W3C于2009年开始起草的css3布局样式。它旨在提供一种更加有效的布局方式,控制父容器中子元素的布局,排列以及分布,甚至在它们的尺寸未知或动态变化的情况下,都能够做到正确的展现(弹性盒子中的flex也由此而得名)。

 

  弹性盒子的核心概念是父容器拥有能够改变其子元素的的宽度/高度和排列顺序,使得子元素能够以最佳的尺寸填充整个父容器的可用空间。简单来说,一个弹性盒子能够充分扩展它的子元素尺寸使其填满自身的可用空间,或者收缩子元素来防止溢出。

 

  最重要的一点是,相对于传统的块布局block以及行布局inline来说,弹性盒子模型是方向不可知的(direction-agnostic)。尽管块布局以及行布局能够很好的满足页面布局,但是它们缺乏弹性,不能很好地支持大型或者是复杂的应用(特别在屏幕进行横竖屏切换,改变视图尺寸,延伸,收缩等等复杂情景下)。

 

  注意:弹性盒子布局适合作用在一个应用的组件和小范围的布局,例如,一个歌曲列表,一个导航条,等等。相对的,Grid layout,即栅格布局则倾向于进行大规模的界面布局,例如,整体界面的分栏布局,左右结构,上下结构,等等

 

  Flex布局实现垂直与水平居中:

石家庄网站建设

  以上关于flex弹性盒子理解与使用均属石家庄网站建设工程师的个人观点,大家如果对此有着不同的见解,可以关注公众号“尚武科技派”给我留言,大家可以交流一下自己的心德体会,共同学习进步。

 




上一篇:小程序设计规范             下一篇:403访问被拒绝的解决方案

标签:石家庄网站建设
尚武科技
推荐阅读
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
值班电话:15512183667
在线服务: 尚武科技售前专员   
合作答疑 |  企业邮箱 |  关于我们 |  联系我们 |  版权声明 |  会员中心 |  友情链接 |  免责声明
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved