css 弹性盒子布局

• display:flexCSS3
• CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

• flex-growCSS3
• CSS属性 flex-grow 设置了一个 flex 项主尺寸的 flex 增长系数。它指定了 flex 容器中剩余空间的多少应该分配给项目（flex增长系数）。

• flex-shrinkCSS3
• CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

• flex-basisCSS3
• 设置或检索弹性盒伸缩基准值。

• flexCSS3
• CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。

• flex-directionCSS3
• CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

• flex-wrapCSS3
• 该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

• flex-flowCSS3
• CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

• align-contentCSS3
• align-content 属性在弹性容器内的各项，没有占用交叉轴上所有可用的空间时，对齐容器内的各项。

• align-itemsCSS3
• CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。 align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。

• align-selfCSS3
• 定义flex子项单独在纵轴方向上的对齐方式。

• justify-contentCSS3
• CSS justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

• justify-itemsCSS3
• CSS 的 justify-items 属性为所有盒中的项目定义了默认的 justify-self ， 可以使这些项目以默认方式沿适当轴线对齐到每个盒子。

• justify-selfCSS3
• CSS justify-self 属性设置框在其对齐容器内沿适当轴对齐的方式。

• place-contentCSS3
• place-content 属性是align-content 和 justify-content 的简写。使用这两个属性的值可以用于任何的布局情况。

• place-itemsCSS3
• CSS place-items 属性分别设置 align-items 和 justify-items 属性。如果未设置第二个值，则第一个值也将用于该值。

• orderCSS3
• CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。