flex布局

一、布局原理

felx为弹性布局，任何一个容器都可以指定为flex布局

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

采用flex布局的元素，成为"flex"容器，简称“容器”，所有子元素自动成为容器成员，称为flex项目

二、一些概念

主轴：默认为水平（x）向右

侧轴：默认为竖直（y）向下

三、常见父项属性

flex-direction     设置主轴方向

        属性值：

        row（默认）        从左到右

        row-reverse         从右到左

        column                 从上到下

        colum-reverse      从下到上

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

        属性值：

        flex-start（默认）   从头部开始

        flex-end                  从尾部开始

        center                     在主轴居中对齐

        space-around         平分剩余空间

        space-between       先两边贴边，再平分剩余空间（重要！）

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

        属性值：

        nowrap（默认） 不换行

        wrap                   换行

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

        属性值：

        flex-start（默认） 从上到下

        flex-end                从下到上

        center                   挤在一起居中

        stretch                  拉伸

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

        属性值：

        flex-start（默认）  在侧轴的头部开始排列

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

        center                    在侧轴中间显示

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

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

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

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

四、常见子项属性

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

align-self    表示继承父元素的algin-items属性，若没有父元素，则等同于stretch

                  可以设置单个项目和其他项目有不同属性

                 （可覆盖align-items属性，默认为auto）

order     定义项目的排列顺序（和z-index）类似

        例：div span:nth-child(2){

                        order:-1;   <!---默认为0-->

                }

参考资料：bilibili黑马程序员