.box {
    width: auto;
    display: flex;
    height: 200px;
    background: aqua;
    align-items: center;

}
.box1,.box2,.box3 {
    width: 100px;
}
.box1 {
    background: #00f;
    align-self: baseline ;
    height: 200px;
    flex-basis: 200px;
    /* order: 3; */
    /* flex-grow: 1; */
    /* flex-shrink: 1; */
    /* width: 100px; */
    /* flex-basis:auto; */
}
.box2 {
    background: #ff0;
    height: 100px;
    /* order: -7; */
    /* flex-grow: 3; */
    /* flex-shrink: 0; */
    /* flex-basis:200px; */
}
.box3 {
    /* width: 100px; */
    background: #f00;
    height: 100px;
    /* order: 1; */
    /* flex-grow: 1; */
    /* flex-shrink: 1; */
    /* flex-basis:auto; */
}
/* 
    弹性盒的项目属性：
        1.order:数字； 项目的排列顺序 数字越小越靠前 默认为0 允许负值
        2.flex-grow:定义项目的放大比例;不允许负值，默认是0；
        3.flex-shrink:定义了项目的缩小比例，默认为1,0不会发生改变，不允许负值
        4.flex-basis：定义项目在分配额外空间之前的缺省尺寸 默认auto
        5.flex: flex-grow flex-shrink flex-basis(0,1,auto);
                便携值：auto (1 1 auto) 和 none (0 0 auto)
        6.align-self:项目对齐的方式
                auto 继承父级的align-items属性
                如果没有父级 贼等同于stretch
            flex-start 交叉轴的起点对齐
            flex-end   交叉轴的终点对齐
            center     交叉轴的中心点对齐
            baseline   项目的第一行文字的基线对齐
            stretch    如果项目未设置高度或设为auto  将占满整个屏幕
*/