css3 flex-shrink属性设置或检索弹性盒的收缩比率

原创 国哥笔记  2019-01-26 12:53  阅读 489 views 次

flex-shrink属性定义及用法

在css中,flex-shrink属性是用来设置或检索弹性盒的收缩比率,指定弹性盒的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。flex-shrink属性只对弹性盒对象的元素其作用,作用于其它元素没有效果。

目前,主流浏览器都也可以支持该属性,不支持的浏览器版本可以在该属性前添加对应的前缀(-webkit-、-ms- 或 -moz-)来支持。Internet Explorer 10及更早版本浏览器不支持flex-shrink 属性,Safari 6.1及更新版本通过-webkit-flex-shrink属性支持该属性。

flex-shrink属性语法格式

  1. css语法:flex-shrink: number/initial/inherit;
  2. JavaScript 语法:object.style.flexShrink="5";

属性值说明

  • number:数字,规定项目将相对于其他灵活的项目进行收缩的量;
  • initial:设置该属性为它的默认值;
  • inherit:从父元素继承该属性;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 flex-shrink属性设置或检索弹性盒的收缩比率</title>
<style type="text/css">
#content{display: flex;width: 500px;}
#content div{flex-basis: 120px;border: 3px solid rgba(0,0,0,.2);}
.box {flex-shrink: 1;}
.box1 {flex-shrink: 2;}
</style>
</head>
<body>
<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
</html>

运行结果:

flex-shrink属性

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-flex-shrink.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情