弹性（Flex）布局

    Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

1、在不同方向排列元素

2、重新排列元素的显示顺序

3、更改元素的对齐方式

4、动态地将元素装入容器

在 Flexbox 模型中，有三个核心概念：

– flex 项，需要布局的元素

– flex 容器，其包含 flex 项

– 排列方向（direction），这决定了 flex 项的布局方向（注：更多的文章叫主轴）;

1.创建一个 flex 容器

display: flex;

2.拉伸方向

flex-direction: row(默认),column;column-reverse（内部反向）

3.X轴-横向对齐

justify-content: flex-start(默认);flex-end;center；

                            space-evenly: 均匀排列每个元素,每个元素之间的间隔相等。

　　                     space-between: 均匀排列每个元素,左右直接对齐。

                            space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

4.y轴-纵向对齐

align-items: flex-start;（默认);flex-end;center；

5.指定子元素的flex

align-self: flex-start;（默认);flex-end;center；

6.运行自动换行

flex-wrap：wrap

7.多行/列排列的 flex 项在交叉轴上的对齐方式

align-content: flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默认）

8.拉伸元素

flex-grow: 1 多余空间的自动拉伸

flex-shrink ：1 超出空间的拉伸

flex-basis:10px  

flex-basiss属性使用后width自然失效，但是受max-width限制