登录  /  注册
老师,flex-shrink: 1; 按视频操作,不会自动缩放
延得
延得 2021-04-06 20:36:44
[PHP讨论组]

<!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中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号