前端相关--css弹性盒子布局

flex类型的盒模型简要介绍

CSS3为display提供了一个flex属性值，通过该属性值可以更好的实现多栏布局，将display设为flex即可实现弹性盒子布局。
弹性盒布局是CSS3新增的功能，在早期该属性值曾用过box和inline-box，目前最新的属性值直接使用flex和inline-flex，其中inline-flex就是inline类型的flex，使用较少。

弹性盒模型的配套属性

flex-flow：用于控制容器内子元素的排列方向和换行方式。该属性是一个复合属性，有flex-direction和flex-wrap组成。
flex-direction：指定弹性盒内子元素的换行方式。
flex-wrap：指定弹性盒内子元素的换行方式。
order：该属性作用于盒内子元素，指定子元素排列顺序。
flex：作用于盒内子元素，控制子元素缩放比例。复合属性，由flex-grow、flex-shrink、flex-basis三个子属性组成。
align-items：用于控制弹性盒所有子元素 在排列方向的垂直方向上的对齐方式。
align-self：作用于弹性盒内的子元素，用于控制该子元素在自身在排列方向的垂直方向上的对齐方式。
justify-content：该属性作用于盒内子元素，用于控制该子元素自身在排列方向上的分布方式。
align-content：该属性作用于弹性盒，用于控制弹性盒内行的分布方式。