css3-由垂直居中学到flex布局

水平且垂直居中

.box{

            border: 1px solid red;

            height: 100vh;    /* viewpoint height 视点高度*/

         display: flex;

            justify-content: center;

            align-items: center;

            flex-direction: column;

        }

Flex（Flexible Box，弹性布局），用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

关于flex的兼容

webkit 内核的浏览器（如Safari）和 IE10 及以下的浏览器兼容方法：

.box{

display: -webkit-flex; /* Safari */

display: -ms-flexbox; /*ie 10*/

display: flex;

}

6个属性简介：

flex-direction   容器内项目的排列方向，默认横向排row(从左到右)，可以设置成纵向排column(从上倒下)，

                            “row-reverse、cloumn-reverse”分别表示从右到左、从下到上。

flex-wrap   容器内项目换行方式默认不换行 nowrap、换行wrap(第一行上方)和wrap-reverse(第一行下方)

flex-flow    以上两个属性的简写方式，默认值为 row nowrap。

justify-content　项目在主轴上的对齐方式 右对齐 flex-end， 居中 center，两端对齐 space-between，

                          每个项目两侧的间隔相等 space-around。

align-items　项目在交叉轴上对齐方式 起点对齐 flex-start，终点对齐 flex-end，中点对齐 center， 第一行

                    文字的基线对齐 baseline，默认 stretch (项目未设置高度或设为auto，将占满整个容器的高度)

align-content　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

                    起点对齐 flex-start，终点对齐 flex-end，中点对齐 center，

                    上下对齐 space-between，每个项目两侧的间隔相等space-around 。

6个属性例子：

#linghuohezi {

            border: 3px solid green;

            width: 300px;

            height: 300px;

            display: flex;

       }

                （盒子1234各设了100px边长）

①flex-direction   容器内项目的排列方向

1.默认 从左到右 row

flex-direction:row

2.从上到下 column

flex-direction:column

②flex-wrap　容器内项目换行方式

1.默认 不换行 nowrap

flex-wrap:nowrap

2.换行 wrap

#linghuohezi{

      flex-wrap:wrap;

       }

flex-wrap:wrap

2.反向换行 wrap-reverse

#linghuohezi{

    flex-wrap:wrap-reverse;

     }

flex-wrap:wrap-reverse

③flex-flow  是flex-derection 和 flex-wrap的简写方式

    默认 从左到右 不换行 row nowrap

#linghuohezi{

        flex-flow:row nowrap

     }

④justify-content  项目在主轴上的对齐方式

         （便于观察 父容器边长改为 600px）

1.默认 左对齐 flex-start

#linghuohezi{

#linghuohezi{

        justify-content:flex-end

     }

justify-content:flex-start

2.右对齐 flex-end

#linghuohezi{

    justify-content:flex-end

     }

 justify-content:flex-end

3.居中 center

#linghuohezi{

        justify-content:center

}

justify-content:center

4.两端对齐 space-between

    （项目之间的间隔均相等)

#linghuohezi{

        justify-content:space-between

}

justify-content:space-between

5.每个项目两侧的间隔均相等 space-around

    （项目之间的间隔比项目与边框的间隔大一倍）

#linghuohezi{

        justify-content:space-around

}

justify-content:space-around

⑤align-items  项目在交叉轴上的对齐方式

1.默认 上对齐 flex-start

2.下对齐 flex-end

  #linghuohezi{

        align-items:flex-end

    }

 align-items:flex-end

3.居中 center

#linghuohezi{

        align-items：center

}

align-items:center

4.第一行文字基线对齐 baseline

（设置1234盒子 边长为 50px，100px，200px，400px，字体为 40px，50px，20px，80px）

#linghuohezi{

        align-items：baseline

}

align-items:baseline

5.拉伸充满 stretch （1234盒子无高度设置时）

    #linghuohezi{

            align-items:stretch

    }

align-items:stretch

⑥align-content 多行项目在交叉轴上的对齐方式

        align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），

        默认 充满拉伸 stretch，起点对齐 flex-start，终点对齐 flex-end，中点对齐 center，

        上下对齐 space-between，每个项目两侧的间隔相等space-around 。

align-content 多行项目不同值

注意：stretch无高度设置时