css中flex-shrink属性有什么用

发布时间:2022-03-01 14:06:46 作者:小新
来源:亿速云 阅读:233

这篇文章主要为大家展示了“css中flex-shrink属性有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中flex-shrink属性有什么用”这篇文章吧。

  使用flex-shrink属性指定当Flexbox中的框架宽度小于不必要的宽度时框架宽度的程度。

  语法:

  flex-shrink:(数量)

  代码示例:

  flex-shrink.html

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="utf-8"/>

  <title></title>

  <linkrel="stylesheet"href="flex-shrink.css"/>

  </head>

  <body>

  <divclass="container">

  <divclass="frameA">第一个内容<br/>php中文网<br/>php中文网</div>

  <divclass="frameB">第二个内容<br/>php中文网<br/></div>

  <divclass="frameC">第三个内容<br/>php中文网<br/>php中文网</div>

  <divclass="frameD">第四个内容<br/>php中文网<br/>php中文网</div>

  <divclass="frameE">第五个内容<br/>php中文网<br/>php中文网</div>

  </div>

  </div>

  </body>

  flex-shrink.css

  .container{

  display:flex;

  }

  .frameA{

  border:1pxsolid#e9006b;

  flex-shrink:1;

  }

  .frameB{

  border:1pxsolid#ff6a00;

  flex-shrink:2;

  }

  .frameC{

  border:1pxsolid#d0b106;

  flex-shrink:3;

  }

  .frameD{

  border:1pxsolid#4aae20;

  flex-shrink:4;

  }

  .frameE{

  border:1pxsolid#01b9b3;

  flex-shrink:5;

  }

  说明:

  我们将frameAflex-shrink设置为1,frameBflex-shrink设置为2,frameCflex-shrink3,frameDflex-shrink4,frameEflex-shrink5。如果框架的宽度变得比文本显示所需的宽度窄,则此设置允许您指定减少框架宽度的程度。帧的缩小程度以frameA:frameB:frameC:frameD:frameE=1:2:3:4:5的比率变窄。(frameE比frameA收缩得多。)

  效果如下:

  使用Web浏览器显示上述代码结果。显示如下所示的页面。

  360截图20181108171915428.jpg

  减小窗口宽度。每个帧的宽度仍然是允许内容在不必缩小时不必要地显示的宽度。

  360截图20181108171953581.jpg

  如果进一步缩小窗口宽度,内部文本将变为包装显示,并且框架宽度会缩小

  360截图20181108171823300.jpg

  进一步缩小框架的宽度。从“第一内容”的框架可以看出“第五内容”框架的宽度急剧缩小。

  360截图20181108172112435.jpg

  通过进一步缩小宽度,您可以很明显地看到变化的程度。

  360截图20181108172215780.jpg

  可以确认框架的变窄宽度以frameA:frameB:frameC:frameD:frameE=1:2:3:4:5的比率变窄。

  仅在一帧中指定flex-shrink时的操作

  将CSS更改为以下内容并仅在一帧中指定flex-shrink。

  flex-shrink.css

  .container{

  display:flex;

  }

  .frameA{

  border:1pxsolid#e9006b;

  flex-shrink:5;

  }

  .frameB{

  border:1pxsolid#ff6a00;

  }

  .frameC{

  border:1pxsolid#d0b106;

  }

  .frameD{

  border:1pxsolid#4aae20;

  }

  .frameE{

  border:1pxsolid#01b9b3;

  }

css中flex-shrink属性有什么用

以上是“css中flex-shrink属性有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css中使用flex-shrink属性的方法
  2. css中float属性有什么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:如何使用css3实现线性渐变

下一篇:HTML5中video audio拖动的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》