弹性布局

display ：fixed
弹性布局的特点：
1.优点：可以解决复杂的布局问题 缺点IE不兼容

弹性布局

• 改变是父容器的布局方式；有默认的流式布局为弹性布局
• 简介改版子元素属性；块变为行内块

主轴：默认为盒子水平方形；可以通过改变方向主轴方向
交叉轴：与主轴垂直及时交叉轴

总结：

1.弹性布局改变的容器内容的布局方式；从流式布局变为flex布局
2.布局方式的规律是什么呢？
沿着主轴起始方向排列，在主轴方向上有不同的对齐方式
主轴方向：水平方向，垂直方向
起点：有正（左 or 上） 反（右 or 下）
对齐方式：左对齐，右对齐，居中对齐，两端对齐，等距离对齐（子元素距离相等）
注意：如果子元素宽度或者高度之和 大于父元素；布局之后，是否换行
当容器的流发生改变时 ；子元素也会受影响；有块变行内块

竖直方向弹性布局

注意：我们所接触的所有布局；视觉角度- 都是横向的。所有纵向会很抽象

方式：1.横向布局；我们只要考虑左右方向就可以了
2.纵向布局都需要看的是 页面的上下。
align-item

• 作用：决定子元素在交叉轴排列方式
• flex-start 从交叉轴起始位置开始排列；
• 如果交叉轴方向在纵向，那么就是从上面开始排列
• flex-end 从交叉轴末端开始排列
• center 从容器的中间开始；
• 如果交叉轴方向在竖直方向；那么center 那是从父容器高度中间开始排列
• baseline 与子元素中的文字有关；所有子元素中；第一行文字对齐 ， 也就是；根据每个子元素中；
  每一行文字的位置；决定每个字元素的对齐
• stetch 默认值