zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    前端总结(二)跨域
    前端总结(一)闭包
    html2canvas截图白边显示问题
    阻止回车刷新页面的方法
    mac下搭建redis环境
    Mac上的Apache 开启,停止,重启
    mac系统下安装、启动、停止mongodb
    Python实战之制作瘟疫传播实验
    Pyhton表白代码——浪漫圣诞节
    Python网络爬虫——BeautifulSoup4库的使用
  • 原文地址:https://www.cnblogs.com/xjt31/p/14130682.html
Copyright © 2011-2022 走看看