以下内容主要摘自阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlexbox布局背景(FlexibleBox)模块（目前是W3CLastCallWorkingDraft）旨在提供一种更有效的方式来布置项目，即使容器中项目之间的对齐大小和分配空间是未知的或动态的（因此“柔性”）。弹性布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。Flex容器扩展项目以填充可用空间，或缩小项目以防止溢出。最重要的是，与常规布局（基于垂直的块和基于水平的内联块）相反，弹性盒布局是方向无关的。虽然这些对于页面来说很好，但它们缺乏支持大型或复杂应用程序的灵活性（尤其是在方向更改、调整大小、拉伸、收缩等方面）。注意：Flexbox布局最适合应用程序组件和小型布局，而Grid布局最适合大型布局。基本概念容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边的交点）称为main-start，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。容器属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-directionflex-direction属性决定了主轴的方向（即项目排列的方向）。.container{flex-direction:行|行反转|栏目|column-reverse;}row（默认）：主轴水平，原点在左端。row-reverse：主轴水平，起点在右端。column：主轴垂直，起点为上边缘。column-reverse：主轴垂直，起点在底部。flex-wrap默认情况下，弹性项目将尝试放在一行中。您可以更改此设置并允许使用此属性根据需要包装项目。.container{flex-wrap:nowrap|包装|wrap-reverse;}nowrap（默认）：不换行。wrap:f换行，第一行在上面。wrap-reverse：换行，第一行在下面。flex-flowflex-flow属性是flex-direction和flex-wrap属性的复合属性。flex-flow属性用于设置或检索flexbox模型对象的子元素的流向。弹性流：<'弹性方向'>||<'flex-wrap'>justify-contentjustify-content属性定义项目在主轴上的对齐方式。container{justify-content:flex-start|弹性端|中心|间隔|环绕空间|空间均匀；}flex-start：默认值。项目位于容器的开头。flex-end：项目位于容器的末端。center：项目位于容器的中心。space-between：两端对齐，item之间的间隔相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。space-evenly：使容器内任意两个项目之间的间距相同。align-itemsalign-items属性定义项目如何在交叉轴上对齐。.box{对齐项目：flex-start|弹性端|中心|基线|stretch;}它可能需要5个值。具体对齐方式与横轴的方向有关，以下假设横轴为自上而下。flex-start：横轴起点对齐。flex-end：横轴末端对齐。center：横轴的中点对齐。baseline：项目第一行文本的中心线对齐方式。拉伸：默认值。如果item没有设置width和height或者设置为auto，它会占据整个容器的高度。align-contentalign-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。.box{对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}flex-start：对齐横轴的起始位置。flex-end：对齐横轴的结束位置。center：与横轴的中点位置对齐。space-between：与横轴两端对齐，轴与轴之间的间距均匀分布。space-around：每个轴的两侧都有相等的间距。因此，轴之间的距离是轴与框架之间的距离的两倍。拉伸：默认值。轴站面向整个横??轴。父容器属性orderflex-growflex-shrinkflex-basisflexalign-selforderorder属性定义项目的排序顺序。值越小，排列越高。默认为0..item{order:
