flex布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

    ·当把父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效

    ·伸缩布局 = 弹性布局 = 伸缩盒布局 = flex布局

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

    ·子容器可以横向排列也可以纵向排列

总结flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性

    ·flex-direction：设置主轴方向，默认是主轴

        主轴与侧轴：在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

        属性值说明

            ·row默认值从左到右

            ·row-reverse从右到左

            ·column从上到下

            ·column-reverse从下到上

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

       属性值说明

            ·flex-start默认值 从头部开始 如果主轴是x轴，则从左到右

            ·flex-end从尾部开始排列

            ·center在主轴居中对齐（如果主轴是x轴，则从左到右）

            ·space-around平分剩余空间

            ·space-between先两边贴边，再平分剩余空间

    ·flex-wrap：设置子元素是否换行 （默认不换行）

        属性值说明

            ·nowrap默认值 不换行

            ·wrap换行

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

        属性值说明

            ·flex-start从上到下

            ·flex-end从下到上

            ·center挤在一起居中（垂直居中）

            ·stretch拉伸（默认值）盒子不要给高度

水平垂直居中方式：

div{

display:flex;

width:500px;

height:500px;

justify-content:center;

align-items:center;

}

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

        ·属性值说明

            ·flex-start默认值在侧轴的头部开始排列

            ·flex-end在侧轴的尾部开始排列

            ·center在侧轴中间显示

            ·space-around子项在侧轴平分剩余空间

            ·space-between子项在侧轴先分布在两头，在发、平分剩余空间

            ·stretch设置子项元素高度平分父元素高度

    ·flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

    ·子项常见属性

        ·flex子项目占的份数（重要）

        ·align-self 控制自己在侧轴的排列方式

        ·order属性定义子项的排列顺序（前后顺序）

        ·默认值是0，数值越小，就越排在前面，与z-index相反