网页布局之弹性盒子Flex-Box



<<=不想看文字的直接点这里=>>

在当今的WEB设计中,想要设计出高大上的网站布局是至关重要的。布局用来确定页面上不同的组件和元素的尺寸和位置。随着现在响应式设计越来越多,WEB应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式布局中页面设计中最重要的就是布局。需要根据窗口尺寸来调整布局,从而改变组件、元素的尺寸和位置,以达到最佳效果。这也使得布局的逻辑变得越来越复杂。CDc思考者日记网-束洋洋个人博客

本文介绍的是CSS3规范中引入的新布局模式-弹性盒子布局模式(Flex-Box)。弹性盒子模型可以用简单的方式满足很多常见复杂的布局需求。CDc思考者日记网-束洋洋个人博客

它的优势在于开发人员只是声明布局应该具有的行为,而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。CDc思考者日记网-束洋洋个人博客

CDc思考者日记网-束洋洋个人博客

我们知道,在没有CSS3之前,我们的布局都是靠着float,positaion,margin,padding等属性来控制布局怎样呈现。这种极其麻烦也不能完美适配自适应的方式被取代是迫在眉睫的。CDc思考者日记网-束洋洋个人博客

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。CDc思考者日记网-束洋洋个人博客

在该布局模型中,容器会根据布局的需要,调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时,其中包含的条目也会被动态地调整。CDc思考者日记网-束洋洋个人博客

比如当容器尺寸变大时,其中包含的条目会被拉伸以占满多余的空白空间;当容器尺寸变小时,条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。CDc思考者日记网-束洋洋个人博客

我们先来看看最终效果,这是已经写好的一个页面教程,大家可以对照着自己尝试下。CDc思考者日记网-束洋洋个人博客

弹性盒子可以看成是一个大的纸箱,里面装了很多小盒子(大小形状不一),我们能让这些小盒子按照X-Y轴的方式让其自由排列。这个里面的小盒子,在布局中,每一行会把其中的条目从主轴起始位置开始,依次排列到主轴结束位置;而当容器中存在多行时,会把每一行从交叉轴起始位置开始,依次排列到交叉轴结束位置。CDc思考者日记网-束洋洋个人博客

弹性盒布局中的条目有两个尺寸:主轴尺寸和交叉轴尺寸,分别对应其 DOM 元素在主轴和交叉轴上的大小。如果主轴是水平方向,则主轴尺寸和交叉轴尺寸分别对应于 DOM 元素的宽度和高度;如果主轴是垂直方向,则两个尺寸要反过来。与主轴和交叉轴尺寸对应的是主轴尺寸属性和交叉轴尺寸属性,指的是 CSS 中的属性 width 或 height。CDc思考者日记网-束洋洋个人博客

比如,当主轴是水平方向时,主轴尺寸属性是width,而width的值是主轴尺寸的大小。CDc思考者日记网-束洋洋个人博客

以上只是CSS3布局其中的一部分,后续继续努力学习中。CDc思考者日记网-束洋洋个人博客

本文参考大量资料汇总实践而出。

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  •  感谢主机屋提供网站空间;
  •  感谢万网阿里云提供域名解析;
  •  感谢EmpireCMS提供CMS系统;
  •  感谢bootstrap展示本站前端页面;
  •  感谢Glyphicons Halflings提供字体;
  •  感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈