flex常用简写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .flex {
      display: flex;
      width: 400px;
      margin-bottom: 30px;
      border: 2px dotted red;
    }

    .flex div {
      border: 1px solid green;
    }

    .flex-initial {
      flex: initial;
    }

    .flex-0 div {
      flex: 0;
    }

    .flex-none div {
      flex: none;
    }

    .flex-1 div {
      flex: 1;
    }

    .flex-auto div {
      flex: auto;
    }
  </style>
</head>

<body>
  <p>flex: initial (flex: 0 1 auto)，初始值，常用。</p>
  <div class="flex flex-initial">
    <div>Javascript</div>
    <div>Vue.js</div>
    <div>CSS3</div>
    <div>Element-ui</div>
    <div>Adobe Photoshop CC 2020</div>
  </div>

  <p>flex: 0 (flex: 0 1 0%)，适用场景较少。适合设置在替换元素的父元素上；</p>
  <div class="flex flex-0">
    <div>Javascript</div>
    <div>Vue.js</div>
    <div>CSS3</div>
    <div>Element-ui</div>
    <div>Adobe Photoshop CC 2020</div>
  </div>

  <p>flex: none (flex: 0 0 auto)，推荐。适用于不换行的内容固定或者较少的小控件元素上，如按钮。</p>
  <div class="flex flex-none">
    <div>Javascript</div>
    <div>Vue.js</div>
    <div>CSS3</div>
    <div>Element-ui</div>
    <div>Adobe Photoshop CC 2020</div>
  </div>

  <p>flex: 1 (flex: 1 1 0%)，推荐。适合等分布局；</p>
  <div class="flex flex-1">
    <div>Javascript</div>
    <div>Vue.js</div>
    <div>CSS3</div>
    <div>Element-ui</div>
    <div>Adobe Photoshop CC 2020</div>
  </div>

  <p>flex: auto (flex: 1 1 auto)，使用场景少。适合基于内容动态适配的布局；</p>
  <div class="flex flex-auto">
    <div>Javascript</div>
    <div>Vue.js</div>
    <div>CSS3</div>
    <div>Element-ui</div>
    <div>Adobe Photoshop CC 2020</div>
  </div>
</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容