flex属性值综合案例示意实例页面

展示

代码

• HTML：

  <div class="container">
      <item class="zhang">范张</item>
      <item class="xin">范鑫</item>
      <item class="xu">范旭</item>
      <item class="shuai">范帅</item>
      <item class="ge">范哥</item>
  </div>

• CSS：

  .container {
      display: flex;
      border: 2px dashed crimson;    
  }
  .container item {
      border: 2px solid deepskyblue;    
  }
  .zhang {
      flex: 0 2 100px;    
  }
  .xin {
      flex: 0 1 100px;    
  }
  .xu {
      flex: 0 1 100px;    
  }
  .shuai {
      flex: 3 0 20px;    
  }
  .ge {
      flex: 2 0 20px;    
  }