开启弹性盒子

开启弹性盒子，子元素默认水平排序

display:flex;

指定弹性子元素在父容器中的位置

指定弹性子元素在父容器中的位置
row:默认排序，左到右，横向从左到右
row-reverse:右对齐，从后往前排列
column:纵向排列
column-reverse:反转纵向排列，从后往前排，最后一项排最上面

右对齐，从后往前排列

flex-direction: row-reverse;

纵向排列

flex-direction: column;

垂直对齐方式

居中

justify-content: center;

居上

justify-content: flex-start;

居下

justify-content: flex-end;

纵向对齐方式

居左

align-items:flex-start;

居中

align-items:center;

居右

align-items:flex-end;

给子元素盒子分配盒子空间

添加了flex或flex-grwo后宽度不生效
大盒子是500px，小盒子都是100px
示例：
将第1个小盒子分为3个小盒子的宽度

2,3个小盒子分为1个小盒子的宽度

.div1{
    width:100px;
    height:100px;
    background-color: green;



    flex: 3;


}

.div2{
    width:100px;
    height:100px;
    background-color: pink;

    flex: 1;

}

.div3{
    width:100px;
    height:100px;
    background-color:  orange;

    flex: 1;

}