flex关键字属性值基本效果示意实例页面

展示

代码

• HTML：

  <h4>flex:initial</h4>
  <div class="container">
      <item>范张</item>
      <item>范鑫</item>
      <item>范旭</item>
      <item>范帅</item>
      <item>范哥</item>
  </div>
  <p class="container">
      <item>范张范张范张范张</item>
      <item>范鑫范鑫范鑫范鑫</item>
      <item>范旭范旭范旭范旭</item>
      <item>范帅范帅范帅范帅</item>
      <item>范哥范哥范哥范哥</item>
  </p>
  <h4>flex:1</h4>
  <div class="container flex-1">
      <item>范张范张范张范张范张范张范张范张范张</item>
      <item>范鑫</item>
      <item>范旭</item>
      <item>范帅</item>
      <item>范哥</item>
  </div>
  <h4>flex:auto</h4>
  <div class="container flex-auto">
      <item>范张范张范张范张范张范张范张范张范张</item>
      <item>范鑫</item>
      <item>范旭</item>
      <item>范帅</item>
      <item>范哥</item>
  </div>
  <h4>flex:0</h4>
  <div class="container flex-0">
      <item>范张范张范张</item>
      <item>范鑫范鑫范鑫</item>
      <item>范旭范旭范旭</item>
      <item>范帅范帅范帅</item>
      <item>范哥范哥范哥</item>
  </div>
  <h4>flex:none</h4>
  <div class="container flex-none">
      <item>范张范张范张</item>
      <item>范鑫范鑫范鑫</item>
      <item>范旭范旭范旭</item>
      <item>范帅范帅范帅</item>
      <item>范哥范哥范哥</item>
  </div>

• CSS：

  .container {
      display: flex;
      border: 2px dashed crimson;    
  }
  .container item {
      border: 2px solid deepskyblue;    
  }
  
  .flex-auto item {
      flex: auto;
  }
  .flex-none item {
      flex: none;
  }
  .flex-0 item {
      flex: 0;
  }
  .flex-1 item {
      flex: 1;
  }