DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    meta name="keywords" content="关键词1，关键词2，关键词3">
    meta name="description" content="网站描述bla bla">
    title>网站标题title>
    style>
        *{
            margin:0;
            padding:0;
        }
        body{
            display:flex;
            flex-direction: column;
            height:100vh;
        }
        header{
            height:60px;
            background:lightblue;
        }
        main{
            height:100px;
            background:pink;
            flex-grow:1;
        }
        footer{
            height:60px;
            background:#ddd;
        }
    style>
head>
body>
    header>header>
    main>main>
    footer>footer>
body>
html>

元素动态缩小的处理技巧：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    meta name="keywords" content="关键词1，关键词2，关键词3">
    meta name="description" content="网站描述bla bla">
    title>网站标题title>
    style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
        }
        /* flex-shrink 空间不足时的缩小比例，设置为0表示不缩小 */
        article div:nth-child(1){
            flex-shrink:0;
        }
        article div:nth-child(2){
            flex-shrink:1;
        }
        article div:nth-child(3){
            flex-shrink:2;
        }
    style>
head>
body>
    article>
        div>1div>
        div>2div>
        div>3div>
    article>
body>
html>

主轴的基准尺寸的定义：

flex-basis 指定了 flex 元素在主轴方向上的初始大小

如果flex-direction是row，则主轴的基准尺寸可覆盖width；

如果flex-direction是column，则主轴的基准尺寸可覆盖height；

作用可以参考这篇：https://juejin.im/post/6844904152238129165

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    meta name="keywords" content="关键词1，关键词2，关键词3">
    meta name="description" content="网站描述bla bla">
    title>网站标题title>
    style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
            flex-basis:100px;
        }
    style>
head>
body>
    article>
        div>1div>
        div>2div>
        div>3div>
    article>
body>
html>

弹性元素组规则和定义：

flex-grow+flex-shrink+flex-basis可简写为flex

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    meta name="keywords" content="关键词1，关键词2，关键词3">
    meta name="description" content="网站描述bla bla">
    title>网站标题title>
    style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px;
            background-clip:content-box;
            width:120px;
            height:120px;
            flex-grow:1;
            flex-shrink:2;
            flex-basis:100px;
            /* 简写形式 */
            flex:1 2 100px;
            /* 都不缩放的情况下，会溢出 */
            flex:1 0 150px;
        }
    style>
head>
body>
    article>
        div>1div>
        div>2div>
        div>3div>
    article>
body>
html>

也可以单独进行调整：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    meta name="keywords" content="关键词1，关键词2，关键词3">
    meta name="description" content="网站描述bla bla">
    title>网站标题title>
    style>
        *{
            margin:0;
            padding:0;
        }
        article{
            display:flex;
        }
        article div{
            background:lightblue;
            border:1px solid lightblue;
            padding:10px