CSS3 flex盒子语法介绍

15 Jun

在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问题特别多,要用好并不容易。CSS3里引入了Flexible Box弹性盒模型,专门用于布局。

先看一下Flexible Box弹性盒子(也有翻译成伸缩盒模型)的基本术语,直接W3C盗图:

flex0

Flexible Box弹性盒子有两根轴,main-axis和cross-axis。两轴的开始/结束位置为main-start/end和cross-start/end。盒子内的各元素在两轴上的空间为main-size和cross-size。

Flexible Box弹性盒子由于历史原因,分成旧版本,混合版本,新版本。如果你要兼容旧版本的浏览器的话(尤其是IE10)噩梦就来了,你需要准备多套语法,开发测试成本很高。当然前景是光明的,等旧式浏览器逐渐被淘汰,弹性盒子的布局必将大放异彩。

先看语法,以下子属性设在容器上:

  • diaplay
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

以下子属性设在内部元素上:

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • order
  • align-self

先看设在容器上的子属性

display

应用Flexible Box很简单,display属性新增了flexinline-flex(不特殊说明,均为新语法,下同)分别将原本的盒模型改成弹性盒模型。效果见图。你也可以自行参照例子页面(但希望是新式浏览器,用IE就悲剧了…)

flex1

.flex {display: flex;}    //上图
.inline-flex {display: inline-flex;}  //下图

<div class="pDivflex">	//下图将类flex改成inline-flex即可
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

可见一旦将父div设成display:flex或inline-flex,就能使内部获得弹性布局的效果,原本应该垂直排列的4个子div,被默认从左到右水平排列了。

旧语法:display值不是flex和inline-flex而是boxinline-box(且需要加上各浏览器前缀,如display: -webkit-box;)

混合版:(主要针对IE10,因此下面均加上了-ms-前缀)display值不是flex和inline-flex而是-ms-flexbox-ms-inline-flexbox

flex-direction

flex-direction用于设置容器的方向,值为row(默认值),row-reversecolumncolumn-reverse。一图胜千言(图来源于阮一峰的博客,但原图顺序似乎不对…稍作修改)

flex-direction

默认是row内部元素从左到右排列,row-reverse就是将main-start起点设在右边,这样就实现了从右到左排列。column原理同,不赘述。你可以参照例子页面

旧语法:不是flex-direction而是2个子属性box-orientbox-direction

box-orient用于设置容器排列方式,值为horizontal(默认值),verticalinline-axisblock-axis。horizontal或inline-axis等价于新语法的row,vertical或block-axis等价于新语法的column。另外inline-axis表示内部元素沿着内联轴排列,试下来和horizontal看不出什么区别。block-axis表示内部元素沿着块轴排列,试下来和vertical看不出什么区别。如果谁知道区别麻烦告诉我,谢谢。

box-direction用于设置容器排列顺序,值为normal(默认值),reverse。因此设好box-orient后,再加上box-direction: reverse;等价于新语法的row-reverse/column-reverse。

混合版:相比新版只需加上-ms-前缀,即-ms-flex-direction,值同新语法

flex-wrap

flex-wrap用于指定放不下后如何换行。值为nowrap(默认值),wrapwrap-reverse。你可以参照例子页面,并拖动页面大小,随着页面变窄,nowarp会自动调整元素宽度以保持不换行,wrap不改变元素宽度,显示不下就换行。wrap-reverse显示不下换行的同时,调整行的顺序(恕我经验浅薄,wrap-reverse真不知道有什么卵用)

旧语法:不是flex-wrap而是box-lines,默认值single表示项目一行或一列显示,multiple表示自动换行或多列表示。

混合版:相比新版只需加上-ms-前缀,即-ms-flex-wrap,值同新语法

flex-flow

flex-flow用于合并指定flex-direction和flex-wrap属性,默认值为row nowrap。该属性单纯为了简化代码而已,不赘述。

旧语法:无该属性

混合版:相比新版只需加上-ms-前缀,即-ms-flex-flow,值同新语法

justify-content

justify-content用于main-axis的对齐,值为flex-startflex-endcenterspace-betweenspace-around。一图胜千言,不赘述。你可以参照例子页面

justify-content

旧语法:不是justify-content而是box-pack,可设startendcenterjustify(等价于新语法的space-between)

混合版:不是justify-content而是-ms-flex-pack,可设startendcenterjustify(等价于新语法的space-between),distribute(等价于新语法的space-around)。

align-items

align-items用于corss-axis的对齐,可设flex-startflex-endcenterbaseline(根据元素的基线),stretch。一图胜千言,为展示效果设置了3和4的font-size,这样可以清楚地看出baseline的效果。还设置了1和2的height,这样可以看出stretch时3和4被拉伸了。你可以参照例子页面

align-items

旧语法:不是align-items而是box-align,可设startendcenterbaselinestretch,和新语法相比就值名不同。

混合版:不是align-items-ms-flex-align,值同旧语法。

align-content

align-content和justify-content有点像,值也类似可设flex-startflex-endcenterspace-betweenspace-aroundstretch。区别是justify-content用于main-axis的对齐,而align-content用于多行在容器内的对齐方式。因此一定要多行(必须flex-wrap: wrap且容器不足以将所有元素放入一行内)才能出效果,如果容器内就一行是没有效果的。一图胜千言,你可以参照例子页面

align-content

旧语法:无该属性

混合版:不是align-content-ms-flex-inline-pack,可设startendcenterjustify(等价于新语法的space-between),distribute(等价于新语法的space-around),stretch

上面介绍的都是在外层容器上设的弹性盒子的属性,现在看看给内部元素设的弹性盒子的属性。

flex-grow

flex-grow将剩余空间按比例扩展。即当容器空间大于内部元素空间之和时,剩余部分将根据各元素指定的flex-grow按比例分配,使各元素增大。默认值为0,表示剩余空间不分配。

例如,外层div总宽300px,第一个p长度80px,第二个p长度160px,且两个p均不设flex-grow。这样后面剩余宽度60px

flex-grow

现在给两个p都设flex-grow:1;

flex-grow

因为两个p的flex-grow值是一样的,意味原本后面剩余的60px将被均分,每个p都额外得到30px。因此第一个p的宽度80px->110px,第二个p的宽度160px->190px

如果第一个p的flex-grow:2,第二个p的flex-grow:1不变。这样原本后面剩余的60px将被分为3份,第一个p额外得到40px,宽度80px->120px,第二个p额外得到20px,宽度160px->180px

flex-grow

因此当外层容器宽度大于内部元素宽度之和时,内部元素的flex-grow值越大,分配到的剩余空间的比例越高,元素就越大。

旧语法:用box-flex,具体参见下面

混合版:用-ms-flex,具体参见下面

flex-shrink

flex-shrink将溢出空间按比例收缩。即当容器空间小于内部元素空间之和时,溢出部分将根据各元素指定的flex-shrink按比例分配,使各元素缩小。默认值为1,表示溢出时等比例缩小

例如,外层div总宽200px,第一个p长度80px,第二个p长度160px,且两个p都设flex-shrink:0;,这样后面将溢出40px

flex-shrink

现在给两个p都设flex-shrink:1;,或直接将flex-shrink属性删掉(默认值就是1)

flex-shrink

因为两个p的flex-shrink一样,原本溢出的40px将被等比例分配。但这里的等比例和上面flex-grow不同,这里的等比例的意思是保持元素原有的比例。原先第一个p的宽度是80px,第二个p的宽度是160px,比例1:2,因此溢出的40px将仍旧1:2比例分配。第一个p的宽度80px->66.7px,第二个p的宽度160px->133.3px

如果第一个p的flex-shrink:2,第二个p的flex-shrink:1不变。原本两个p的宽度比是1:2,现在flex-shrink的比例是2:1。因此溢出的40px将按3:3比例分配,等于均分。第一个p缩减为60px,第二个p缩减为140px

flex-shrink

因此当外层容器宽度小于内部元素宽度之和时,内部元素的flex-shrink值越大,分配到的溢出空间的比例越高,元素就越小。

旧语法:用box-flex,具体参见下面

混合版:用-ms-flex,具体参见下面

flex-basis

flex-basis定义了剩余或溢出的基准值。什么是基准值呢?比如你某元素宽度100px,你将其flex-basis:600px,则该元素将以600px来计算剩余或溢出。默认值为auto,表示基准值就是元素原始尺寸。

例如,外层div总宽600px,5个p的宽度均为100px:

flex-basis

现在给第3个p设flex-basis:600px;(注意不是将其width改成600px)。这样弹性盒子在计算时会将第3个p的宽度按600px来计算,这样5个p的总宽度为1000px,而容器的宽度是600px,超出了400px。由于未设flex-shrink默认值为1,保持原始尺寸比例,因此将按1:1:6:1:1来分配这溢出的400px。很容易计算得出第3个p将缩小240px,宽度为600px->360px。其他p将缩小40px,宽度为100px->60px

flex-basis

旧语法:无该属性

混合版:用-ms-flex,具体参见下面

flex

flex用于合并指定flex-grow和flex-shrink和flex-basis属性,默认值为0 1 auto。还有两个快捷值auto等价于1 1 auto,none等价于0 0 auto。该属性单纯为了简化代码而已,不赘述。

旧语法:不是flex而是box-flex,即旧语法中不分flex-grow,flex-shrink统一用box-flex来设定,如果容器空间大于元素之和就相当于flex-grow,反之就相当于flex-shrink。没有flex-basis。

混合版:相比新版只需加上-ms-前缀,即-ms-flex,值同新语法

order

order用于指定内部元素的显示顺序,默认值0表示元素是根据DOM的先后顺序来显示的,有了该属性可以轻松调整顺序。值就是顺序的序号。例如原始不设order,元素根据DOM顺序显示。

order

现在给第三和第5个p指定order:1,给第一个p指定order:2。第二和第四个p不指定,因此默认值为0。效果如下:

order

旧语法:不是order而是box-ordinal-group,默认值为1

混合版:不是order而是-ms-flex-order,默认值为0

align-self

上面介绍过用align-items为容器指定对齐方式,你还可以用align-self单独为内部元素指定对齐方式。默认值auto表示继承容器的align-items值,可设flex-startflex-endcenterbaselinestretch。效果同align-items。见下图,容器的align-items:flex-start,然后分别给2345号元素指定align-self为flex-end,center,baseline,stretch。

align-self

旧语法:无该属性

混合版:不是align-self而是-ms-flex-item-align,值为autostartendcenterbaselinestretch

总结

Flexible Box最大的问题就是各浏览器厂商间的标准各有不同,导致开发成本很高。虽然有了新版的语法,但如果要兼顾旧版浏览器(尤其是IE)的话就有点抓狂了。好在前景是光明的,等那些旧版浏览器死透透了,Flexible Box必将绽放光芒。下一篇介绍一下它在布局上应用,感受一下它的优势