flex弹性布局学习分享

定义:

        flex布局是一种在css中布局元素的一种常用方式，也叫弹性布局。

        主要包括两个主要组件，弹性容器和弹性项目

原理:

        有一个包含子元素的元素，我们只需要把这个元素的display属性设置为flex就实现了弹性布局。

        注意在弹性布局中，子元素的float、clear和vertical-align属性将会失效

        flex布局就是给父元素盒子的css属性display属性设为flex，来控制子元素盒子的排列方式的

弹性布局和普通css布局的区别：

        弹性布局不用像普通css布局那样担心块/内联元素，它需要关注的是主轴和交叉轴（侧轴）

弹性容器常用属性：

        1.flex-direction:用于设置主轴的方向，可选参数row,clumn(默认row)

        2.justify-content:设置主轴上的子元素的排列方式，可选参数flex-start,flex-end,center,space-between,space-around(默认flex-start)

        3.flex-wrap:设置子元素是否换行，可选参数wrap,nowrap(默认参数nowrap)

        4.align-content:设置侧轴上子元素的排列方式，可选参数和justify-content相同

        5.align-items:设置侧轴上子元素的排列方式

        6.flex-flow:复合属性，相当于设置了flex-direction和flex-wrap

详细介绍：

        1.flex-direction:

                在flex布局中分为主轴和侧轴（也可以叫行和列、x轴和y轴）

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

                默认的侧轴方向是y轴方向，竖直向下

                可选参数有row,row-reverse,column,column-reverse

                row:默认方向是水平的，子元素从左边开始排列

                row-reverse:方向也是水平的，不过子元素是从右边开始排列的

                column:主轴方向变为竖直向下，子元素从上往下排列

                column-reverse:主轴方向竖直向下，但是子元素从下往上排列

        2.justify-content:

                设置主轴上元素的排列方式

                可选参数 flex-start,flex-end,center,space-between,space-around

                        flex-start:默认值如果主轴是水平方向，由左向右排列

                        flex-end:从尾部开始排列（从右向左）

                        center：如果主轴是水平方向则在主轴上居中对齐

                        space-between：左右紧贴弹性容器，然后平分剩余空间

                        space-around：平分剩余空间

        3.flex-wrap

                设置是否换行

                可选参数wrap（换行），nowrap（默认，不换行）

        4.align-content

                和justify-content类似，控制侧轴上的元素排列方式

        5.align-items

                设置侧轴上元素排列方式，和align-content的区别是align-items是控制单行，align-content控制的是多行

          6.flex-flow

                复合属性

弹性项目的属性：

        弹性布局能够根据页面上其他元素的 大小调整项目的大小。这是通过 3 个不同的属性 flex-grow、flex-shrink 和 flex-basis 完成的。下面来看看这3个属性

        1.flex-grow

                允许项目可以占用容器多少的剩余空间，默认值是0

        2.flex-basis

                这个属性用来告诉我们它在容器中占用了多少空间，默认值是auto,即按自己的width属性来计算

        3.flex-shrink

                就是如果项目在容器中溢出了，项目将会自动缩小填充容器，默认值是1

弹性布局高级属性gap(间隙）

        这个属性让弹性布局可以使用margin/padding效果，这个属性使用在父容器上面的