flex布局笔记

    flex是弹性布局，用来为盒状模型提供大的灵活性，任何一个容器都可以指定为flex布局；采用flex布局的元素，称为flex容器，简称容器；它的所有子元素自动成为容器成员，称为flex项目，简称“项目。

       注意：

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

        （2）伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

    1）flex常见的父项属性：

            A、flex-direction：设置主轴的方向（决定主轴方向，即项目的排列方向）

                a、主轴与侧轴（主轴与侧轴是会变化的）

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

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

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

                b、flex-direction属性值

                    row：默认值从左到右

                    row-reverse：从右到左

                    column：从上到下

                    column-reverse：从下到上

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

            注：使用前一定要确定好主轴元素是哪个

            属性值：

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

            b、flex-end：从尾部开始排列

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

            d、space-around：平分剩余空间

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

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

                属性：

                nowrap：默认值，不换行

                wrap：换行

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

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

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