flex布局备忘录

flex布局在父容器和子容器上都有设置的属性

父容器上的属性

display: flex;
    flex-direction:row;  /*怎么排列 row column*/
    flex-wrap: wrap;      /*子容器是否换行 wrap是换行 nowrap是不换行 换行的话子容器宽高生效*/
    
    justify-content: center;  /*主轴子容器的对齐方式 默认是左对齐 flex-start flex-end是右对齐 居中是center space-around*/
    align-items: flex-end;        /*交叉轴轴子容器的对齐方式 默认是上对齐 flex-start flex-end是下对齐 居中是center*/
    
    align-content: flex-start;    /*多条轴线的对齐方式 就是不止一行时候的对齐方式 当子容器超过一行需要设置*/

子容器上的属性

flex:1 1 33.3333%; //第一个参数是放大倍数 第二个参数是缩小倍数 第三个是默认宽度