flex布局

知识点：

                - flex布局

            描述：

               - 如果设置Felx布局，则需要设置一个元素为flex容器，容器中的子元素为容器中的项（item），item按照flex布局规则进行放置

               - 设置flex容器：display：flex

                              display：inline-flex

               

                容器相关概念：

                   1、容器中存在两个轴：

                         主轴（main axis）

                         交叉轴（cross axis）

                    2、默认主轴水平方向，交叉轴垂直方向，可以改变

                    3、默认容器中的item沿着主轴方向排列

                主要了解容器属性，项目属性

知识点：

               - flex-direction

            描述：

               - 容器属性

               - 表示设置容器中的item主轴方向

               可选值：

                 row： 主轴水平（左到右）

                 row-reverse： 主轴水平（右到左）

                 column：主轴垂直（上到下）

                 column-reverse：主轴垂直（下到上）

                - 水平放置不下，自动压缩，可设置换行

                - 垂直方向放置不下溢出

知识点：

               - flex-wrap

            描述：

               - 容器属性

               - 默认情况下，项目在水平方向放置不下，自动成比例压缩

               - flex-wrap属性定义了如果放置不下，如何换行

               可选值：

                  - nowrap:默认值，不换行

                  - wrap：换行

                  - wrap-reverse：换行（反）

 

             复合属性：

               - 如果没有写：flex-direction、flex-wrap属性，则使用默认值

              row，nowrap

               - flex-flow：是flex-direction、flex-wrap属性简写形式

               - 语法：flex-flow：<flex-direction> <flex-wrap>

/* 主轴方向水平 */

            /* flex-direction: row; */

              /* 主轴方向垂直 */

            /* flex-direction: column; */

           

            /* 设置换行 */

             /* flex-wrap: wrap; */

           /* flex-wrap: wrap-reverse; */

           /* flex-wrap: nowrap; */

知识点：

               - justify-content

            描述：

               - 容器属性

               - 主轴对齐方式

               可选值：

                ● flex-start（默认值）：左对齐

                ● flex-end：右对齐

                ● center： 居中

                ● space-between：两端对齐，项目之间的间隔都相等

                ● space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

                ● space-evenly: 所有item的左右间距相同

 知识点：

               - align-items

            描述：

               - 容器属性

               - 交叉轴对齐方式

               可选值：

                ● flex-start（默认值）：左对齐

                ● flex-end：右对齐

                ● center： 居中

                ● baseline: 项目的第一行文字的基线对齐

                ● stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

知识点：

               - align-content

            描述：

               - 容器属性

               - 当容器中的item产生换行，则出现多轴

               - 如果换行后存在冗余空间，item换行之后自动分配间距，（平均分配），

               - 多轴对齐方式

                   - 所有item相对于交叉轴的对齐方式

 

               可选值：

                 flex-start： 交叉轴开始

                 center; 交叉轴中点位置

                 flex-end： 交叉轴结束位置

                 space-between: 交叉轴两端对齐

                 space-around: 环绕对齐，item两端间距相同

 

             align-content和align-item区别：

                相同点：

                   - 都是以交叉轴为对齐方式

                不同的

                  - align-item：换行后默认间距保持，然后整体以交叉轴为标准进行不同方式的对齐

                  - align-content：换行后默认间距消失，每行/列交叉轴为标准进行不同方式的对齐

               

知识点：

               - order

            描述：

               - order属性是flex容器中的项目（item）属性

               - order属性可以设置容器中itme排列顺序

               - item默认在容器中的排列顺序为html结构顺序

               - 数值越小排序越靠前

               - 默认值为0

知识点：

               - flex-grow

            描述：

             - flex-grow属性表示剩余空间如何按照比例进行分配

             - 存在富裕空间才有可能进行放大

             - 默认中为0

             - flex-grow的值就是剩余空间分布的比例  

 知识点：

               - flex-shrink

            描述：

               - 如果容器中的元素水平放置不下，默认会同比例压缩

               - flex-shrink: 0;表示不压缩

               flex-shrink: 1;表示压缩（放置不下，压缩）

               - 可设置不同的值，进行等比例压缩，值越大，压缩越多

            知识点：

               - flex-base

            描述：

             - flex-base：表示元素在主轴上占据空间的大小

             - 如果设置flex-base属性，则元素本身在主轴上设置单位失效

 知识点：

               - flex

            描述：

              - 容器中的item属性

              - flex是复合属性，代表flex-grow,flex-shrik,flex-basis的缩写

              后两个属性可选，默认值为：0 1 auto

              - 属性值：

                 flex:auto  代表（1 1 auto）

                 flex：none 代码（0 0 auto）

 知识点：

               - align-self

            描述：

              - align-self容器中项目的属性

              - 项目在交叉轴的对齐方式

              - align-self运行单个项目与其他项目不一样的对齐方式