CSS3伸缩盒Flexible Box

这是一种全新的布局，在移动端很是实用，IE对此布局的相关的兼容不是很好，Firefox、Chrome、Safrai等须要加浏览器前缀。

先说说这种布局的特色：

1）移动端因为屏幕宽度都不同，在布局的时候为了适配，若是用百分比，就得精确计算，并且若是有1px边框，计算会更加复杂难控制

2）若是有多列，要让全部列的高度同样，之前的话须要用各类计算或用子元素撑高等

3）上下居中，若是是在之前，那么用line-height或top绝对定位等计算

4）表单布局的时候，常常是左边和右边在一行上，以往是设置float或position与margin-left组合布局

5）网页有时候要有个底部，放些联系方式友情连接等，这个底部应该永远在下面，即便中间没内容，也不要移上来，以往的话是给中间赋个高等

而如今，用Flexible Box的几个属性就能完成上面的高难度动做。

有一个在线的flexbox小游戏能够玩耍一下，叫作flexboxfroggy。规则很简单，就是将颜色对应的青蛙跟荷叶合在一块儿。

1、新旧语法

1）几个基础概念

1. flex container（弹性容器），主要设置display为flex或-webkit-flex，那么这个容器中的子元素就是弹性的。

2. flex item（弹性子元素），尺寸可经过普通的width或height，或者使用高级的flex属性，自定义分配空间设置尺寸。

3. main axis（主轴或横轴）和cross axis（侧轴或纵轴），其中属性flex-direction、justify-content、align-items、align-self控制着轴的方向或对齐方式。

4. flex-wrap属性能够控制弹性子元素的换行。

5. 有个order属性，用整数值来定义排列顺序，数值小的排在前面。

 

2）新旧属性对比

旧语法	新语法

旧版部分属性兼容性：

新版部分属性兼容性：

 

3）新旧属性对应

旧属性	新属性	定义或对比
box-orient box-direction	flex-direction	box-orient:horizontal + box-direction:normal = flex-direction:row box-orient:horizontal + box-direction:reverse = flex-direction:row-reverse box-orient:vertical + box-direction:normal = flex-direction:column box-orient:horizontal + box-direction:reverse = flex-direction:column-reverse
box-flex	flex	flex有3个子属性，而box-flex只能设置一个数字
box-align	align-items align-content	下面会分析align-items和align-content的区别
box-pack	justify-content	效果相同
box-ordinal-group	order	效果相同
box-lines （实验属性）	flex-wrap	效果相同（Android的UC和微信浏览器没有换行效果）
box-flex-group		设置或检索伸缩盒对象的子元素的所属组
	flex-grow	flex子属性，设置或检索弹性盒的扩展比率
	flex-shrink	flex子属性，设置或检索弹性盒的收缩比率
	flex-basis	flex子属性，设置或检索弹性盒伸缩基准值
	flex-flow	flex-direction与flex-wrap的复合属性，设置或检索弹性盒模型对象的子元素排列方式
	align-self	定义flex子项单独在侧轴（纵轴）方向上的对齐方式

 

4）align-content与align-items的区别

先看下面的对比图片，左边是align-content，右边是align-items（在线代码请点击这里，用Chrome打开）

align-content只有在多行的时候才会出现效果，若是只有一行就不会有效果，能够修改在线的代码看效果。此属性与在主轴上对齐方式的justify-content属性相似（Android上的UC和微信浏览器不显示flex-wrap效果）

align-items在多行的时候，两列不是被当成了一个总体，但在一行的时候，效果很好。align-self修改的是父级align-items的效果。

 

5）子元素空间计算方式

新语法flex，里面包括flex-grow扩展比率、flex-shrink收缩比率和flex-basis起始数值。这两个属性的兼容性不是很好，UC浏览器就不能使用。

分两种状况：

1. 容器的宽度 > 子元素宽度总和，查看在线源码。

容器的宽度设置为500px，flex-basis子元素起始宽度分别50px、80px、100px。

.flex li:nth-child(1) {
  flex: 1 1 50px;
  background:red;
}

.flex li:nth-child(2) {
  flex: 2 2 80px;
  background:blue;
}

.flex li:nth-child(3) {
  flex: 3 3 100px;
  background:black;
}

先算出剩余空间为270px，用flex-grow来计算。

最终宽度 = flex-grow / flex-grow总和 * 剩余空间 + flex-basis

子元素1 = (1 / (1+2+3)) * 270 + 50= 95

子元素2 = (2 / (1+2+3)) * 270 + 80= 170

子元素3 = (3 / (1+2+3)) * 270 + 100= 235

2. 容器的宽度 < 子元素宽度总和，查看在线源码。

容器的宽度设置为110px，flex-basis子元素的属性和上面相同。

先算出溢出值120px，再根据收缩比率，计算出收缩总和 1*50 + 2*80 + 3*100 = 510px。

最终宽度 ≈ flex-basis - (收缩比率 * flex-basis) / 收缩总和 * 溢出值

子元素1 = 50 - (1*50 / 510) * 120 ≈ 38.23

子元素2 = 80 - (2*80 / 510) * 120 ≈ 42.35

子元素3 = 100 - (3*100 / 510) * 120 ≈ 29.40

 

6）主轴与侧轴

这两个轴看上去像X、Y坐标，可是有一点不一样的就是XY位置是不会变的，X坐标轴不会变成Y坐标轴。

经过 flex-direction 或 box-orient 设置排列方式后，主轴和侧轴的位置也会变了。以下图所示：

在作 justify-content 或 align-items 对齐的时候，要注意参照的轴的位置。

例如我想作个垂直居中的操做，我会设置 align-items:center，在上图中的第一个主轴和侧轴中，能够作到想要的效果。

可是在第二个主轴和侧轴中就会显示水平居中的效果，由于 align-items 是根据侧轴（Cross axis）来对齐的。

 

7）-webkit-box 与 flex 略有不一样

网上不少地方仅仅说这两个只是语法上面的不一样，但在实际项目中，碰到过只能用-webkit-box才能达到本身想要的效果。

例如我要在flex布局中实现超出的文本显示省略号，查看在线代码。-webkit-line-clamp这个属性就必需要和-webkit-box结合使用.

.flex {
  width: 200px;
  display: -webkit-box;
  /*display: flex;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;/*限制在一个块元素显示的文本的行数*/
  overflow: hidden;
  text-overflow: ellipsis;
}

应该还有其余的不一样点，我还没发现。

 

3、实际应用

1）简单的网格系统

bootstrap2.3.2中有个栅格系统，经过百分比或px与float结合产生栅格效果，而且是响应式的，CSS代码要300多行。

flex布局原本就是响应式的，这样会省掉很多代码，查看在线代码。

 

2）多列等高

等高的问题在国外叫《Holy Grail Layout》，名称挺高大上的，内容一大堆。

关于等高的技巧，有不少种，能够查看这篇《八种建立等高列布局》，方法各有优缺点，不管哪一种但实现起来都须要些代码。

而flex布局，设置display=flex，各个子元素再个设置空间，他们的高度可以自动调整到相同，查看在线源码。

 

3）绝对底部

在网页上面，有时候底部那栏须要一直贴在下面，例如友情连接这些信息，而若是中间内容没有，就会塌陷上去。

下图中就是在没有内容的时候上来了，虽然能够在内容区域默认设置个高度，可是底部不会正正好贴到屏幕的最下面，除非精确计算。

国外管这个叫《Sticky Footer》

flex布局中只要设置下flex-direction: column方向，再设置下容器的高度与屏幕同样或更高，这样底部的子元素就会一直贴在下面。

查看在线代码。更多的信息能够参考《Solved by Flexbox》，Github地址在这里。还有个flexbugs能够参考参考。

 

4、注意点

1）多列布局中的column-*属性对弹性子元素无效，这也是一种弹性布局，可是有效的场景比较简单

例如瀑布式照片墙（下图所示），须要弹性的内容只有一个img标签

2）曾经有一个场景（下图所示），Flex布局可以等高，可是当用::after设置了个钩后，会出现::after内容的高度仍是原先的，致使了错位。

具体内容能够点击这里查看。

3）float 和 clear 对弹性子元素无效。

4）vertical-align 对弹性子元素的对齐无效