flex布局原理以及各属性详解

1 布局原理

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

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

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

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

        * 体验中div就是flex父容器。

        * 体验中span就是子容器flex项目。

        * 子容器可以横向排列也可以纵向排列。

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

2 常见父项属性

    2.1 flex-direction:设置主轴的方向

        2.1.1 主轴与侧轴

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

            * 默认主轴方向就是x轴方向，水平向右

            * 默认侧轴方向就是y轴方向，水平向下

        2.1.2 属性值

            flex-direction属性决定主轴的方向（即项目的排列方向）

            注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的。

                * row: 默认值从左到右 x轴为主轴

                * row-reverse：从右到左

                * column：从上到下    y轴为主轴

                * column-reverse：从下到上

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

        2.2.1 属性定义了项目在主轴上的对齐方式

              注意：使用这个属性之前一定要确定好主轴是哪个

        2.2.2 属性值

            * flex-srart：默认值，从头部开始，如果主轴是x轴，则从左到右，跟主轴走

            * flex-end： 从尾部开始排列

            * center：在主轴居中对齐（如果主轴是x轴，则水平居中）

            * space-around：平分， 所有元素都有一样的左边距右边距，中间的元素的空隙看起来会大，是因为中间的空隙==前盒子的右边剧+后盒子的左边距

            * space-evenly： 均匀排列每个元素，每个元素之间的间隔、第一个和最后一个元素距离两边的间距相等

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

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

        2.3.1 默认情况下，项目（item）都排在一条线（轴线）上。flex-wrap属性定义，flex布局中默认是不换行的。如果装不下，会缩小子元素的宽度，放在父元素里

        2.3.2 属性值

            * nowrap：默认值，不换行

            * wrap：换行

    2.4 align-items：设置侧轴上的子元素排列方式（子项为单行的时候使用）

         2.4.1 该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用。

        2.4.2 属性值

            * flex-start： 默认值，从上到下

            * flex-end： 从下到上

            * center：  挤在一起居中（垂直居中）

            * stretch： 拉伸 

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

        2.5.1  设置子项在侧轴上的排列方式，并且只能用域子项出现换行的情况（多行），在单行下是没有效果的。

        2.5.2 属性值

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

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

            * center：在侧轴中间显示

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

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

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

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

        2.6.1  设置主轴方向和是否换行（换列）复合的属性

                    flex-direction：column;flex-wrap:wrap;flex-flow:column wrap;

                    以上这两行实现的效果是相同的。

         2.6.2   常用属性都是flex-direction和flex-wrap属性的结合。

 

3 属性常见区别

    * align-items适用于单行情况下，只有上对齐，下对齐，居中和拉伸

    * align-content适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐，下对齐，居中，拉伸以及平均分配剩余空间等属性值。

    * 总结就是单行找align-items多行找align-content

4 flex 布局子项常见属性

    * flex子项目占的份数

    * align-self控制子项自己再侧轴的排列方式

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

    4.1 flex属性

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

        flex:number/default 0 (定义在子项上)

    4.2 align-self控制子项自己在侧轴上的排列方式

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

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

    4.3 order属性定义项目的排列顺序

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

        注意：和z-index不一样

--好记性不如烂笔头，慢慢记录