Flexbox CSS3弹性布局一次搞懂
Flexbox CSS3弹性布局一次搞懂
1. 引言
希望可以通过可视化的方式帮助您了解Flexbox属性如何影响flex布局。
2. 正文
2.1 引入
Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布局模块，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）。flex容器最大的特性在于，能够修改子元素的宽度和高度，以满足在不同尺寸屏幕下的如意分布。
许多设计人员、开发人员发现flexbox布局方式使用简单，定位元素更加简单、复杂的布局更容易用较少的代码实现，大大地简化了开发流程。不像块状布局、内联布局那样基于竖直方向、水平方向，flexbox的布局算法基于方向。flexbox布局适用于小的应用组件、新的CSS Grid布局模块更适用于大量的布局。
本指南不解释flex属性如何工作，我们只是用可视化的方式展示flex属性如何影响布局。
2.2 基础
在具体描述flex属性之前，我们先来简要介绍下flexbox模型。flex布局由父容器（我们叫做flex container）和它的子元素（我们叫做flex items）组成。
在上图所示的盒子里，你可以看到用来描述flex container和flex items的属性和术语，如果你想了解详细信息，请访问W3C的flexbox model官方文档.
flexbox自2009的初次草案开始，已经经历了几次更新和语法修改，为了避免困惑、保证清晰，我们仅仅使用2014年9月最后一次工作草案中的语法。如果您想要实现旧浏览器的兼容，请访问这篇文章寻找最佳实践。
最近的flexbox规范浏览器支持情况如下：
-
Chrome 29+
-
Firefox 28+
-
Internet Explorer 11+
-
Opera 17+
-
Safari 6.1+ (prefixed with -webkit-)
-
Android 4.4+
-
iOS 7.1+ (prefixed with -webkit-)
您也可以到caniuse了解浏览器兼容情况详情。
本文中的用到的一些术语的表达约定如下
-
flex-container-弹性容器
-
flex-item-弹性子元素
-
main axis-主轴
-
cross axis-侧轴
2.3 使用
使用flexbox只需要在父元素上设置display属性即可。
如果您想让它以内联方式显示，则
注意：仅仅需要在父元素上设置这一个属性即可，它的子元素会自动变成flex items。
有很多方式分组flexbox的所有属性，我发现最容易理解的方式是分成两组，一组为弹性容器的属性，另一组为弹性子元素的属性，接下来我们按这种方式来一一解析。
2.4 弹性容器（Flex container）属性
2.4.1 flex-direction
该属性通过设置flex container主坐标轴方向影响子元素(flex item)如何在容器中排布。我们可以设置两个主要的方向水平和垂直方向。
可以接受的值有四个row、row-reverse、column、column-reverse，如下所示。
弹性子元素将会按照自左向右的水平排列。
弹性子元素将会自右向左水平排列。
弹性子元素将自上而下竖直排列
弹性子元素将自下而上竖直排列
默认值为row.
2.4.2 flex-wrap
flexbox最初的理念是保持弹性容器的子元素在一行中。flex-wrap属性控制当子元素items超出弹性容器范围是是否换行，以及新行的方向。
本属性可以接受一下几个值：no-wrap、wrap、wrap-reverse，分别如下所示。
弹性子元素将会在一行显示，默认的子元素items将会缩减以适应弹性容器的宽度。
如果需要的话，弹性子元素将会自左向右、自上而下地多行显示。
如果需要的话，弹性子元素将会自左向右、自下而上地多行显示。
默认值为no-wrap.
2.4.3 flex-flow
flex-flow属性是flex-direction和flex-wrap属性的快捷方式，复合属性。
默认值为
row nowrap.
2.4.4 justify-content
justify-content设置弹性子元素在弹性容器中当前行主坐标的对齐方式，当弹性容器里一行上的所有子元素都不能伸缩或已经达到其最大值时，该属性可协助对多余的空间进行分配。
可以接受的值为flex-start、flex-end、center、space-between、space-around等五个值，默认值为flex-start。详细如下所示。
弹性子元素flex items将会弹性容器中居中对齐。
弹性子元素flex items中的第一个、最后一个对齐弹性容器的边缘，其余均匀分布。
弹性子元素flex items中的任何一个都参与均匀分布，即使是第一个和最后一个。
2.4.5 align-items
align-items设置弹性子元素在弹性容器中当前行侧轴上的对齐方式，跟justify-content类似但是作用于侧轴（flex-direction为row和row-reverse时为纵轴，flex为column和column-reverse时为横轴）。该属性设置所有flex items(包含匿名的item)的默认对齐方式。
可以接受的值为flex-start、flex-end、center、baseline、stretch等五个值，默认值为stretch。详细如下所示。
弹性子元素将会从侧轴开始到侧轴结束铺满整个高度（宽度）。
弹性子元素将会堆栈在弹性容器的侧轴开始位置。
弹性子元素将会堆栈在弹性容器的侧轴结束位置。
弹性子元素将会堆栈在弹性容器的侧轴中间位置。
弹性子元素将会以文字基线的方式对齐。
2.4.6 align-content
当弹性容器侧轴中有空白时，align-content属性设置伸缩行的对齐方式，正如justify-content在主轴上设置对齐方式一样。
可以接受的值为：stretch、flex-start、flex-end、center、space-between、space-around等, 默认值为stretch。
各行平分剩余空间。
各行堆栈紧靠侧轴起始边界。