弹性布局

弹性布局

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

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

主轴：默认为盒子水平方向，可以通过属性改变主轴方向
交叉轴:与主轴垂直的及时交叉轴

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

总结

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

竖直方向弹性布局

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

方式：1.横向布局，我们只需要考虑左右方向就可以了
      2.纵向布局都需要看的是 页面的上下。
align-item
作用：决定子元素在交叉轴排列方式
flex-start 从交叉轴起始位置开始排列
            如果交叉轴方向在纵向，那么就从上面开始排列
flex-end    从交叉轴末端开始排列
center 从父容器的中间开始，如果交叉轴方向在竖直方向，那么center
        就是从父容器高度中间开始排列
baseline 与子元素的文字有关，所有子元素中，第一行文字对齐，也就是说
            根据每一个子元素当中，第一行文字的位置，决定每个子元素
            对齐的方式。
stetch 默认值