flex布局

flex弹性布局可以响应式的实现各种布局，名词太多了，看疗效吧

任何一个容器都可以设置为flex布局，将容器设置为flex布局之后，就能对它的下级标签设置布局了

any{
    display: flex;
}

容器上主要有以下5个属性 以及 1个复合属性，共计6个

flex布局主要依赖两根轴线，一个水平，一个竖直，就像两根坐标轴一样，相对于它们，就能确定项目的布局

// 容器
//主轴方向flex-direction 属性：row 水平 columns竖直  row-reverse | column-reverse (前后左右颠倒)的水平和竖直
//一行放不下时，换行flex-wrap 属性：nowrap 不换 wrap 换  wrap-reverse 主轴为row时，上下颠倒的换行(只有在一行放不下时才有用
    // ，所以对于竖直主轴来说没有意义)
//主轴对齐(为方便理解，假设主轴为水平)justify-content 属性：flex-start 左对齐 flex-end 右对齐 center 居中
    // space-between 两端对齐 space-around间隔相等      主轴为竖直时同理
//副轴对齐align-items flex-start  flex-end  center 前三个与主轴一样
    // baseline 第一行文字的底部对齐| stretch(默认值)如果项目未设置高度或设为auto，将占满整个容器的高度
//多根轴线对齐align-content stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit
    // 比较复杂，一般不用
//复合属性flex-flow(flex-direction flex-wrap)

容器内的项目上主要有以下5个属性 以及 1个复合属性，共计6个

//order(排列顺序) 默认为0 可以取负 越小越靠前
//放大比例 flex-grow：number 默认为0 就是不放大 与其他项目比较该值得出放大比例，如果其他项目是0，则剩余空间
    // 都属于该项目(不会换行)
// 缩小比例flex-shrink：number 默认为1，即如果空间不足，该项目将缩小 与其他项目比较该值得出比例，不能取负，如果
    // 为0则不缩小
// flex-basis: <length> | auto 本来大小  分配多余空间之前，项目占据的主轴空间
// align-self:与其他项目不一样的副轴对齐方式,覆盖align-items
// 复合属性flex:(flex-grow flex-shrink flex-basis)
//flex:1 (其他的空间) flex: 0 0 1