女王控的博客

flex深入理解

语法

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

语法解构

CSS语法中的特殊符号的含义绝大多数就是正则表达式中的含义,例如单管道符|,方括号[],问号?,个数范围花括号{}等。具体说明:

首先是单管道符|。表示或者。也就是这个符号前后的属性值都是支持的。因此,下面这些语法都是支持的:

flex: auto;
flex: none;
flex: [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

接下来是[ … ]这一部分。其中方括号[]表示范围。也就是支持的属性值在这个范围内。我们先把方括号[]内其他特殊字符去除,可以得到下面的语法:

flex: auto;
flex: none;
flex: [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]

这就是说,flex属性值支持空格分隔的3个值,因此,下面的语法都是支持的。

flex: auto;
flex: none;
/* 3个值 */
flex: 1 1 100px;

然后我们再看方括号[]内的其他字符,例如问号?,表示0个或1个。也就是flex-shrink属性可有可无。因此,flex属性值也可以是2个值。因此,下面的语法都是支持的。

flex: auto;
flex: none;
/* 2个值 */
flex: 1 100px;
/* 3个值 */
flex: 1 1 100px;

然后我们再看双管道符||,也是独立的意思。表示前后可以分开独立合法使用。也就是flex: flex-grow flex-shrink和flex-basis都是合法的。于是我们又多了2种合法的写法:

flex: auto;
flex: none;
/* 1个值,flex-grow */
flex: 1;
/* 1个值,flex-basis */
flex: 100px;
/* 2个值,flex-grow和flex-basis */
flex: 1 100px;
/* 2个值,flex-grow和flex-shrink */
flex: 1 1;
/* 3个值 */
flex: 1 1 100px;

关键字属性值

initial

初始值。flex:initial等同于设置”flex: 0 1 auto”。可以理解为flex属性的默认值。

auto

flex:auto等同于设置”flex: 1 1 auto”。

none

flex:none等同于设置”flex: 0 0 auto”。

flex分配规则

flex-grow

flex-grow指定了容器剩余空间多余时候的分配规则,默认值是0,多余空间不分配。

flex-shrink

flex-grow指定了容器剩余空间不足时候的分配规则,默认值是1,空间不足要分配。

flex-basis

flex-basis则是指定了固定的分配数量,默认值是auto。如会忽略设置的同时设置width或者height属性。

应用

范张,范鑫和范旭每人100万固定家产,范帅和范哥则20万保底家产。如果范闲归西那天家产还有富余,范帅和范哥按照3:2比例分配;如果没有剩余财产,则范张,范鑫和范旭三位兄长按照2:1:1的比例给两人匀20万保底家产。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,
    body {
      background-color: white;
      margin: 0;
    }

    .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;
    }
  </style>
</head>
<body>
  <div class="container">
    <item class="zhang">范张</item>
    <item class="xin">范鑫</item>
    <item class="xu">范旭</item>
    <item class="shuai">范帅</item>
    <item class="ge">范哥</item>
  </div>
</body>
</html>

评论

阅读下一篇

使用canvas实现和HTML5 video交互的弹幕效果
2019-12-21 16:33:45
0%