flexboxt弹性布局

CSS3 flex盒子语法介绍

转自：张歆琳

转载地址：http://www.jianshu.com/p/dabae5e58552

在以前页面布局多依赖于table，但table标签太多，于是有了absolute布局，float布局等，但它们小问题特别多，要用好并不容易。CSS3里引入了Flexible Box弹性盒模型，专门用于布局。
先看一下Flexible Box弹性盒子（也有翻译成伸缩盒模型）的基本术语，直接W3C盗图：

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属性新增了flex和inline-flex（不特殊说明，均为新语法，下同）分别将原本的盒模型改成弹性盒模型。效果见图。你也可以自行参照例子页面（但希望是新式浏览器，用IE就悲剧了…）

.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而是box和inline-box（且需要加上各浏览器前缀，如display: -webkit-box;）

混合版：（主要针对IE10，因此下面均加上了-ms-前缀）display值不是flex和inline-flex而是-ms-flexbox和-ms-inline-flexbox

flex-direction

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

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

旧语法：不是flex-direction而是2个子属性box-orient和box-direction

box-orient用于设置容器排列方式，值为horizontal（默认值），vertical，inline-axis，block-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（默认值），wrap，wrap-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-start，flex-end，center，space-between，space-around。一图胜千言，不赘述。你可以参照例子页面

旧语法：不是justify-content而是box-pack，可设start，end，center，justify（等价于新语法的space-between）

混合版：不是justify-content而是-ms-flex-pack，可设start，end，center，justify（等价于新语法的space-between），distribute（等价于新语法的space-around）。

align-items

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

旧语法：不是align-items而是box-align，可设start，end，center，baseline，stretch，和新语法相比就值名不同。

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

align-content

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

旧语法：无该属性

混合版：不是align-content是-ms-flex-inline-pack，可设start，end，center，justify（等价于新语法的space-between），distribute（等价于新语法的space-around），stretch

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

flex-grow

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

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

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

因为两个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值越大，分配到的剩余空间的比例越高，元素就越大。

旧语法：用box-flex，具体参见下面

混合版：用-ms-flex，具体参见下面

flex-shrink

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

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

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

因为两个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值越大，分配到的溢出空间的比例越高，元素就越小。

旧语法：用box-flex，具体参见下面

混合版：用-ms-flex，具体参见下面

flex-basis

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

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

现在给第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

旧语法：无该属性

混合版：用-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顺序显示。

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

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

混合版：不是order而是-ms-flex-order，默认值为0

align-self

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

旧语法：无该属性

混合版：不是align-self而是-ms-flex-item-align，值为auto，start，end，center，baseline，stretch

总结

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