flex属性|青训营笔记这是我参与第四届青训营笔记创作活动的第22天。 flex属性用法： 1、flex-directi

这是我参与「第四届青训营」笔记创作活动的第22天

flex属性用法：

1、flex-direction:默认主轴是x轴行 row y轴是侧轴元素是根据主轴来排列的，示例：

        flex-direction: row;
        /*我们可以把主轴变成y轴，x轴为侧轴*/
        flex-direction: column;

2、justify-content:设置主轴上子元素的排列方式，示例：

        justify-content: flex-start; /*默认从头开始对齐*/
        justify-content: flex-end;    /*从尾开始对齐*/
        justify-content: center;    /*居中对齐*/
        justify-content: space-around;      /*平分剩余空间*/
        justify-content: space-between;    /* 先两边贴边再分配剩余空间*/
        justify-content: space-evenly;     /* 距离边框的距离和盒子之间距离相等*/

3、flex-wrap 元素默认在一行显示，示例：

     flex-wrap: wrap;    /*不在一行上*/

4、align-items 设置侧轴上是子元素的排列方式（单行），示例：

        align-items: center;    /*侧轴居中*/
        align-items: stretch;       /*拉伸但不要给高度*/

5、align-content: ;设置侧轴上是子元素的排列方式（多行），示例：

        align-content: space-between;

6、flex-flow: ; 复合属性主轴和几行，示例：

        flex-flow: row wrap;`

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

         flex: 数字;

8、align-self: ;控制子项自己在侧轴上的排列方式，示例：

         align-self: center;

9、order 子元素的排列顺序，数字越小越靠前，示例：

         order: 数字;

二倍图用法：

1、只写一个参数另一个参数被忽略那么图片会等比例缩放，示例：

        background-size: 500px;

2、设置背景的百分比，示例：

        background-size: 50%;

3、cover覆盖整个盒子，多余的地方显示不全，示例：

        background-size: cover;

4、contain 高度和宽度等比例拉伸当宽度或者高度铺满div盒子就不再进行拉伸了可能有部分空白区域，示例：

        background-size: contain;