flex-basic与盒模型尺寸和width对比示意实例页面

展示

代码

• HTML：

  <h4>width:120px</h4>
  <div class="container flex-width">
      <item>我设置了width:120px</item>
      <item>我设置了width:120px，同时box-sizing: border-box</item>
  </div>
  <h4>flex-basis:120px</h4>
  <div class="container flex-basis">
      <item>我设置了flex-basis:120px</item>
      <item>我设置了flex-basis:120px，同时box-sizing: border-box</item>
  </div>
  <h4>flex-basis:120px + word-break: break-all</h4>
  <div class="container flex-basis break-all">
      <item>我设置了flex-basis:120px</item>
      <item>我设置了flex-basis:120px，同时box-sizing: border-box</item>
  </div>

• CSS：

  .container {
      display: flex;   
  }
  .container item {
      padding: 1em;
      border: 1em solid;
      color: deepskyblue;
      outline: 1px dashed #fff;
  }
  .container item:last-child {
      box-sizing: border-box;
  }
  .flex-width item {
      width: 100px;
  }
  .flex-basis item {
      flex-basis: 100px;
  }
  .break-all item {
      word-break: break-all;
  }