Flexible 弹性盒子模型之CSS flex-shrink 属性

实例

让第二个元素收缩到其他元素的三分之一：

效果预览

div:nth-of-type(2){flex-shrink:3;}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

属性
flex-shrink	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

定义和用法

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

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

默认值：	1
继承：	否
可动画化：	是。请参阅 SS3动画属性、CSS3动画实例。效果预览
版本：	CSS3
JavaScript 语法：	object.style.flexShrink="5" 效果预览

CSS 语法

flex-shrink: number|initial|inherit;

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

Flexible 弹性盒子模型之CSS flex-shrink 属性相关推荐

Flexible 弹性盒子模型之CSS justify-content 属性
实例在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制效果预览浏 ...
Flexible 弹性盒子模型之CSS align-self 属性
实例居中对齐弹性对象元素内的某个项: #myBlueDiv { align-self:center; } 复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -w ...
Flexible 弹性盒子模型之CSS align-items 属性
实例居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制效果预览浏览器支持表格中的数字表示支持该属性 ...
弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知:  .css {white-space: nowrap;overflow: hidden;text-overf ...
Flexible 弹性盒子模型之flex
实例让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...
flex弹性布局之弹性盒子模型
一,flex弹性盒子布局 1. flex弹性盒子介绍弹性盒子是 CSS3 的一种新的布局模式.CSS3 弹性盒( Flexible Box 或 flexbox,是一种当页面需要适应不同的屏幕大小以及 ...
flex弹性盒子模型
目录 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器中或在自身属性中 3.flex布局的优点 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器 ...
css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
微信小程序---弹性盒子模型
1.弹性盒子布局弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为 ...

Flexible 弹性盒子模型之CSS flex-shrink 属性

实例

浏览器支持

定义和用法

CSS 语法

属性值

Flexible 弹性盒子模型之CSS flex-shrink 属性相关推荐

最新文章

热门文章