CSS3Flexbox布局一次搞懂分析Word下载.docx
《CSS3Flexbox布局一次搞懂分析Word下载.docx》由会员分享，可在线阅读，更多相关《CSS3Flexbox布局一次搞懂分析Word下载.docx（21页珍藏版）》请在冰点文库上搜索。
在具体描述flex属性之前，我们先来简要介绍下flexbox模型。
flex布局由父容器（我们叫做flexcontainer）和它的子元素（我们叫做flexitems）组成。
在上图所示的盒子里，你可以看到用来描述flexcontainer和flexitems的属性和术语，如果你想了解详细信息，请访问W3C的flexboxmodel官方文档.
flexbox自2009的初次草案开始，已经经历了几次更新和语法修改，为了避免困惑、保证清晰，我们仅仅使用2014年9月最后一次工作草案中的语法。
如果您想要实现旧浏览器的兼容，请访问这篇文章寻找最佳实践。
最近的flexbox规范浏览器支持情况如下：
∙
Chrome29+
Firefox28+
InternetExplorer11+
Opera17+
Safari6.1+（prefixedwith-webkit-）
Android4.4+
iOS7.1+（prefixedwith-webkit-）
您也可以到caniuse了解浏览器兼容情况详情。
本文中的用到的一些术语的表达约定如下
1.
flex-container-弹性容器
2.
3.
flex-item-弹性子元素
4.
5.
mainaxis-主轴
6.
7.
crossaxis-侧轴
8.
2.3使用
使用flexbox只需要在父元素上设置display属性即可。
如果您想让它以内联方式显示，则
注意：
仅仅需要在父元素上设置这一个属性即可，它的子元素会自动变成flexitems。
有很多方式分组flexbox的所有属性，我发现最容易理解的方式是分成两组，一组为弹性容器的属性，另一组为弹性子元素的属性，接下来我们按这种方式来一一解析。
2.4弹性容器（Flexcontainer）属性
2.4.1flex-direction
该属性通过设置flexcontainer主坐标轴方向影响子元素（flexitem）如何在容器中排布。
我们可以设置两个主要的方向水平和垂直方向。
可以接受的值有四个row、row-reverse、column、column-reverse，如下所示。
弹性子元素将会按照自左向右的水平排列。
弹性子元素将会自右向左水平排列。
弹性子元素将自上而下竖直排列
弹性子元素将自下而上竖直排列
默认值为row.
2.4.2flex-wrap
flexbox最初的理念是保持弹性容器的子元素在一行中。
flex-wrap属性控制当子元素items超出弹性容器范围是是否换行，以及新行的方向。
本属性可以接受一下几个值：
no-wrap、wrap、wrap-reverse，分别如下所示。
弹性子元素将会在一行显示，默认的子元素items将会缩减以适应弹性容器的宽度。
如果需要的话，弹性子元素将会自左向右、自上而下地多行显示。
如果需要的话，弹性子元素将会自左向右、自下而上地多行显示。
默认值为no-wrap.
2.4.3flex-flow
flex-flow属性是flex-direction和flex-wrap属性的快捷方式，复合属性。
默认值为rownowrap.
2.4.4justify-content
justify-content设置弹性子元素在弹性容器中当前行主坐标的对齐方式，当弹性容器里一行上的所有子元素都不能伸缩或已经达到其最大值时，该属性可协助对多余的空间进行分配。
可以接受的值为flex-start、flex-end、center、space-between、space-around等五个值，默认值为flex-start。
详细如下所示。
弹性子元素flexitems将会弹性容器中居中对齐。
弹性子元素flexitems中的第一个、最后一个对齐弹性容器的边缘，其余均匀分布。
弹性子元素flexitems中的任何一个都参与均匀分布，即使是第一个和最后一个。
2.4.5align-items
align-items设置弹性子元素在弹性容器中当前行侧轴上的对齐方式，跟justify-content类似但是作用于侧轴（flex-direction为row和row-reverse时为纵轴，flex为column和column-reverse时为横轴）。
该属性设置所有flexitems（包含匿名的item）的默认对齐方式。
可以接受的值为flex-start、flex-end、center、baseline、stretch等五个值，默认值为stretch。
弹性子元素将会从侧轴开始到侧轴结束铺满整个高度（宽度）。
弹性子元素将会堆栈在弹性容器的侧轴开始位置。
弹性子元素将会堆栈在弹性容器的侧轴结束位置。
弹性子元素将会堆栈在弹性容器的侧轴中间位置。
弹性子元素将会以文字基线的方式对齐。
2.4.6align-content
当弹性容器侧轴中有空白时，align-content属性设置伸缩行的对齐方式，正如justify-content在主轴上设置对齐方式一样。
可以接受的值为：
stretch、flex-start、flex-end、center、space-between、space-around等,默认值为stretch。
各行平分剩余空间。
各行堆栈紧靠侧轴起始边界。
各行堆栈紧靠侧轴结束边界。
各行堆栈位于侧轴居中位置。
各行之间空白均匀分布，第一行和最后一行紧靠侧轴边缘。
各行在弹性盒子中均匀分布，两端保留子元素与子元素之间间距大小的一半。
注意
该属性只作用于弹性容器里拥有多行的情况，如果只有单行该属性无效。
另外。
上面所说的“行”指的是主轴方向的平行的数据，例如flex-direction值为row、row-reverse时指数据行，值为column、column-reverse时指数据列。
2.4.7注意事项
所有的column-属性对弹性容器无效
:
first-line和:
first-letter伪对象对弹性容器无效
2.5弹性子元素（Flexitem）属性
2.5.1order
order属性控制弹性容器里子元素的顺序，默认情况下按照弹性容器里添加的顺序排列。
可以接受的值为整型数字，默认值为0.
弹性子元素将按照给定的数字进行排列，如下图所示。
2.5.2flex-grow
该属性设置弹性子元素的扩展比率（flex-grow），该值决定某个子元素相对于其他普通子元素的扩展大小。
可接受值为数字，默认值为0，负数无效。
如果所有的弹性子元素具有相等的flex-grow值，那么所有的子元素将具有相同的大小。
第二个元素可以相对比较大，如下图所示。
2.5.3flex-shrink
该属性设置弹性子元素的收缩比率（flex-shrink），该值决定某个子元素相对于其他普通子元素的收缩大小。
默认情况下所有子元素都可以被收缩，如果设置为0，则不收缩。
2.5.4flex-basis
该属性指定弹性子元素伸缩前的默认大小值，相当于width和height属性。
如下图所示，我们设置第四个子元素的宽度值。
2.5.5flex
该属性为flex-grow,flex-shrink和flex-basis属性的复合属性，一个简写的方式。
默认值为：
01auto。
注意，W3C推荐使用复合属性的方式，因为复合属性的方式可以方便地重置没有指定具体值的属性以适应大部分的常规应用。
2.5.6align-self
align-self允许独立的弹性子元素覆盖弹性容器的默认对齐设置（align-items）。
大家到align-items部分获取不同值得不同表现方式。
默认值为auto。
第三个和第四个弹性子元素将使用align-self属性覆盖默认对齐方式。
注意，指定algin-self为auto时，将使用弹性容器的align-items属性或者如果没有父对象时使用stretch属性。
2.5.7注意
float、clear、vertical-align对flexitem无效。
2.6Flexbox实验场
升级会员 