弹性盒子属性补充

弹性盒子单体控制垂直方向

    .box {
        width: 700px;
        height: 800px;
        border: 1px solid rebeccapurple;
        display: flex;
        flex-wrap: wrap;
        margin: 0px auto;
        /* 把多列的item在整体的垂直方向设置位置，使用align-content */
        /* align-content: center; */
        /* 如果是单个item控制他的垂直方向，使用align-items */
        /* align-items: center; */
    }
    .item {
        width: 200px;
        height: 200px;
        background-color: silver;
        margin: 10px;
    }
    .box .item:nth-child(2) {
        /* order定义项目排列顺序，值越小，越靠前 */
        order: -1;
        /*  align-self: flex-end; */
        /* 单个item控制他在交叉轴上面的方向 */
        /* 交叉轴的对齐方式，允许单项目和其他项目有不同样式，可覆盖align-items */
    }
    .box{
        /* 保证所有成员在一列情况下的控制交叉轴的方向 */
        align-items: center;
    }

flex-basis和flex-shrink属性

     .item{
        /* flex布局item的基本宽度 */
        /* 设置flex-basis,width就不生效，同时存在是优先使用flex-basis */
        /* 如果父元素的宽度太小，item排列不下，设置flex-basis宽度之后，会自动缩小，直到占满父元素 */
        /* flex-basis:200px ; */
        width: 150px;
        height: 150px;
        background-color: royalblue;
        margin: 5px;
        /* flex-grow: 1; */
        /*  flex-grow: 1;放大item,均匀的占满父元素，0代表不放大*/
    }
    /* .item:nth-of-type(3){
        flex-grow: 1;
    } */
    
    .box { 
      flex-shrink: 1;
      /* flex-shrink默认值为1 */
        /* flex-shrink值越大，缩的越小 */
    }