flex盒模型整理

1.弹性盒子真神奇，项目宽度（指x轴为主轴时的宽度，是y轴为主轴时的高度）大于父盒子也溢不出

x轴为主轴时

了解：y轴为主轴时（y轴为主轴可以看成x轴为主轴的旋转）

宽度（指x轴为主轴时的宽度，y轴为主轴时的高度）大于父盒不溢出，取父盒宽度：因为项目的flex-shrink默认值为1，所以当项目宽度大于父盒子宽度时，所有项目宽度会等比例（1:1:1）缩小,总宽度等于父盒子宽度；
当然如果某个项目的为0或为2，那么就不缩小以及承担两份比例的缩小。总之就是flex-shrink为0的项目不承担缩小，flex-shrink为及就承担相对比例的缩小。
  <style>
    .father {
      display: flex;
       100px;
      background-color: blue;
    }
    .son1 {
      height: 50px;
       50px;
      background-color: pink;
    }
    .son2 {
      flex-shrink: 0;
      /* 不承担缩小 */
      height: 50px;
       50px;
      background-color: yellow;
    }
    .son3 {
      flex-shrink: 2;
      /* 承担两份缩小 */
      height: 50px;
       50px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class='father'>
    <span class="son1 all"></span>
    <span class="son2 all"></span>
    <span class="son3 all"></span>
  </div>
</body>

2.父盒子的高度未指定时，项目高度不会溢出；父盒子指定高度后，项目高度大于父盒子高度就会溢出。

父盒子未指定高度时（按照高度最大的子项目高度来撑开父盒子）补充：父盒子未指定宽度时，宽度按照100%来、即独占一行。

<style>
    .father {
      display: flex;
      background-color: blue;
    }

    .son1 {
      height: 50px;
       50px;
      background-color: pink;
    }

    .son2 {
      height: 50px;
       50px;
      background-color: yellow;
    }

    .son3 {
      height: 100px;
       50px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class='father'>
    <span class="son1 all"></span>
    <span class="son2 all"></span>
    <span class="son3 all"></span>
  </div>
</body>

当父盒子指定高度时，若子项目高度大于父盒子，则子项目溢出

  <style>
    .father {
      display: flex;
      height: 50px;
       150px;
      background-color: blue;
    }

    .son1 {
      height: 50px;
       50px;
      background-color: pink;
    }

    .son2 {
      height: 50px;
       50px;
      background-color: yellow;
    }

    .son3 {
      height: 100px;
       50px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class='father'>
    <span class="son1 all"></span>
    <span class="son2 all"></span>
    <span class="son3 all"></span>
  </div>
</body>