CSS3弹性盒布局方式

一.CSS3弹性盒

css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的子项目布局，即使他们的大小是未知或者动态的。
主要是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充
可用空间，或缩小他们以防止溢出容器。

二.flexbox布局功能主要具有以下几点：

1、屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
2、指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；
3、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5、控制元素在页面上的布局方向；
6、按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

三.弹性盒的类型：

• display:flex;设置成弹性盒后，里面的子元素无论是块还是行内，都会在一行显示，子元素没有设置宽度，则与内容同宽
• display:inline-flex;

 四.弹性盒项目的属性：

1.flex-direction

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items

6.align-content

1.flex-direction属性

①作用：决定主轴的方向

②.属性值类型:flex-direction:row | row-reverse | column | column-reverse;

③4个属性值：   row（至左往右）

                       row-reverse（至右往左）

                       column（垂直向下）

                      column-reverse（垂直向上）