flex-basic、width与最小内容宽度同时作用实例页面

展示

代码

• HTML：

  <div class="container">
      <item>设置了width:160px，同时设置了flex-basis:100px</item>
      <item>设置了width:120px，同时设置了flex-basis:100px</item>
      <item>设置了width:80px，同时设置了flex-basis:100px</item>
  </div>

• CSS：

  .container {
      display: flex;
      justify-content: center;
  }
  .container item {
      box-shadow: 0 0 0 1px deepskyblue;
      font-size: 20px;
  }
  .container item:nth-child(1) {
      width: 160px;
      flex-basis: 100px;
  }
  .container item:nth-child(2) {
      width: 120px;
      flex-basis:100px;
  }
  .container item:nth-child(3) {
      width: 80px;
      flex-basis: 100px;
  }