自适应屏幕宽度布局flex

flex为自适应盒子模型，可实现多个盒子自适应水平宽度布局；此时设置的盒子的width属性失效。

/*css代码*/
.flex-display {
            display: flex;
        }
.flex-box {
            margin: 10px 20px;
            flex: 1;
            height: 35px;
            width: 35px;//此属性失效
            background-color: red;
            font-size: 15px;
            color: #ffffff;
            text-align: center;
        }
  /*html代码*/
  <div class="flex-display">
        <div class="flex-box">1</div>
        <div class="flex-box">2</div>
        <div class="flex-box">3</div>
    </div>

网页端效果
此时width属性不生效，该场景广泛应用于多个产品横向排列情况。