登陆

老师,flex-shrink: 1; 按视频操作,不会自动缩放

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>项目上的flex:属性</title>    <style>      * {        box-sizing: border-box;      }      :root {        font-size: 10px;      }      body {        font: size 1.6rem;      }      /* flex 容器 */      .container {        display: flex;        height: 20rem;        border: 1px solid #000;      }      /* flex项目样式(也就是子元素) */      .container > .item {        /* padding: 1rem; */        /* width: 10rem;  方便测试缩放功能,这里推荐用100%不用10rem; */        width: 100%;        background-color: lightcyan;        border: 1px solid #000;        /* 设置项目是否允许放大 1是允许 0 是不允许*/        /* flex-grow: 1; */        /* 设置项目是否允许收缩 */        flex-shrink: 1;        /* 设置项目在主轴空间上的大小 */        /* flex-basis: 15rem; */      }      /* flex 属性 */    </style>  </head>  <body>    <div class="container">      <div class="item">item1</div>      <div class="item">item2</div>      <div class="item">item3</div>      <div class="item">item4</div>    </div>  </body></html>

# PHP
延得延得31 天前124 次浏览

全部回复(1)我要回复

  • 查无此人

    查无此人2021-04-07 11:24:00

    代码检查了,可以缩放。你截图给我看下,或者在检测下,哪里的问题

    image.png

    image.png

    回复
    0
  • 取消回复发送