CSS3 布局神器–flexbox

Author : luckyGirl

flexbox,是一种新的布局模式–伸缩布局,是为呈现复杂应用与页面而设计的,与浮动或是多栏等块布局相比,它是更简单强大的分配空间与对齐内容的工具。   首先,让我们通过一个简单的例子,看看应用flexbox会有什么效果。这是个常用的三栏式布局模式,通常还会期望三块内容等高,不但能达到响应式布局,而且尽量保持中间区域面积大以保证主区域有足够大的显示空间,使用flexbox就可通过简单几行CSS满足以上需求。 接下来flexbox有哪些属性,是如何轻松愉快实现以上布局吧   一、伸缩器能做什么呢? 设置任何伸缩方向(上、下、左、右均可) 只通过样式重排显示顺序(使视觉顺序跟源码无关) 沿着单一粥折行 充分利用可用空间,扩展内容尺寸,使内容更加紧凑 灵活控制对齐方式   二、伸缩容器(flexbox)基本术语 设置元素 display:flex 或是 display:inline-flex,此元素就为一个伸缩容器,伸缩容器的每个子元素都会成为一个伸缩项目,当伸缩项目仅包含空白时,则浏览器将之视为 display:none   注:在不特殊设置时,默认渲染方向是从左到右,主轴方向[Read More]

standard