flex布局（1）

        在网页制作中flex布局是很常用的，它能轻松的让一个容器里的子容器按照一定规律进行排列，而不需要进行繁琐的浮动，定位等过程，而且布局还相对稳定，不会因为页面的放大缩小使得容器位置发生变化，下面我来对flex布局的一些知识点进行总结

      采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为Flex项目（flex item），简称“项目”

flex布局原理：

      就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见的父项属性：

一共6个属性是对父元素设置的

    1.    flex-direction：设置主轴的方向

    2.    justify-content： 设置主轴上的子元素排列方式

    3.    flex-wrap： 设置子元素是否换行

    4.    align-content： 设置侧轴上的子元素的排列方式（多行）

    5.    align-items：    设置侧轴上的子元素排列方式（单行）

    6.    flex-flow： 复合元素，相当于同时设置了flex-direction和flex-wrap

   注意：这些属性都要写在想要设置的盒子的父盒子里，并且父盒子需要写display：flex;

常见的子项属性：

    1.    flex属性

            flex属性定义子项目分配剩余空间，用flex来表示占了多少份数

        语法：.item{

                                flex：   <number>;    （number填数字表示份数）

            }

    2.align-self（控制自己在侧轴上的排列方式）

               align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

        默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

            语法：span：nth-child（2）{

                        align-self：xxx；

            }

       3.order（定义项目的排列顺序）

            数值越小，排列月靠前，默认为0.

            注意：和z-index不一样