CSS3 布局神器–flexbox

Author : luckyGirl

flexbox,是一种新的布局模式–伸缩布局,是为呈现复杂应用与页面而设计的,与浮动或是多栏等块布局相比,它是更简单强大的分配空间与对齐内容的工具。

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

注:在不特殊设置时,默认渲染方向是从左到右,主轴方向为从左到右
 
三、属性列表
各个属性解释可能比较晦涩,只要手动尝试就能
1. flex-flow:row wrap;
控制伸缩方向以及换行,是”flex-direction”和”flex-wrap”属性的缩写
 属性  值
 flex-direction
  • row:默认值,可简单理解为横向布局(通常可理解为从左到右)
  • row-reverse: 与row反向(通常可理解为从右到左)
  • column:可简单理解为列布局(通常可理解为从上到下)
  • column-reverse:与column反向
 flex-wrap
  • nowrap: 默认值,伸缩容器为单行
  • wrap: 伸缩容器为多行
  • wrap-reverse: 侧轴起点与侧轴终点方向交换,且多行同wrap
 
2.align-items:stretch(默认值)| flex-start/baseline | flex-end | center 
    调整伸缩容器在侧轴的对齐方向
align-self:auto(默认值) | flex-start/baseline | flex-end | center | stretch
    适用于单个伸缩项目在侧轴的对齐方式,若不单独设置则遵循align-items

 
3. justify-content:flex-start(默认值) | flex-end | center | space-between | space-around
    主轴上伸缩项目的对齐

 
4. align-content: stretch(默认值) | flex-start | flex-end | center | space-between | space-around
    对伸缩行进行对齐

 
5. order: 0(默认值) | 整数
   控制元素布局的顺序,伸缩项目从序号最小的开始布局.
   比如,设置mainContent “order = 1”, mainNav “order=2″,在不改变HTML代码的情况下改变元素视觉顺序
6. flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
  让元素具有弹性,决定伸缩项目的伸缩性,伸缩容器会等比按照flex属性扩展或是缩小。flex是个缩写属性,包括扩展比率(flex-grow)、收缩比率(flex-shrink)和伸缩基准值(flex-basis)
 属性  值  默认值
 flex-grow  数字  1
 flex-shrink  数字  1
 flex-basis  等同”width”  
 
一个显示「绝对」伸缩(以零为基准值开始)与「相对」伸缩(以项目的内容大小为基准值开始)差异的图解。这三个项目的伸缩比例分别是「1」、「1」、「2

 
 
总结
本文使用的是flexbox的最后语法,目前支持浏览器:Opera Mobile12.1+、Opera12.5+、Firefox18+(部分属性兼容)、Chrome和IE11+。Chrome需要添加浏览器前缀”webkit”,Firefox部分支持,需添加前缀”-moz-“。虽然不是所有浏览器都能够支持,但我想说的是仅仅使用浮动与清楚浮动进行布局是如何繁琐,而flexbox是如何灵活,当然如果再结合媒体查询来实现响应式布局将更加便捷,CSS 越来越强大
 
参考文章:http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans#flex
 
standard

Have your say