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

startXUEBA 2017-01-04

实例

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


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

效果预览
div:nth-of-type(2){flex-shrink:3;}

浏览器支持

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

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

flex-shrink29.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
object.style.flexShrink="5" 效果预览

CSS 语法

flex-shrink: number|initial|inherit;

属性值

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

startXUEBA

相关推荐

web前端入门到实战：CSS3中的弹性盒子模型

在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分

zengni / 0评论 2020-01-17

弹性盒子

　　　　row：横向从左到右排列（左对齐），默认的排列方式。　　　　column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行　　　　wrap-reverse -反转 wrap

htofly / 0评论 2019-11-03

Flexible 弹性盒子模型之CSS order 属性

div#myRedDIV {order:2;}div#myBlueDIV {order:4;}div#myGreenDIV {order:3;}div#myPinkDIV {order:1;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的

cssuperman / 0评论 2017-01-17

Flexible 弹性盒子模型之CSS justify-content 属性

div{display: flex;justify-content: space-around;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。justify-content29.021.0-webkit-11.028.018.0

xingyunchen / 0评论 2017-01-16

Flexible 弹性盒子模型之CSS align-self 属性

#myBlueDiv{align-self:center;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。CSS3object.style.alignSelf="center&q

猫沙盆 / 0评论 2017-01-13

Flexible 弹性盒子模型之CSS align-items 属性

div{display: flex;align-items:center;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。CSS3object.style.alignItems="

wcssdu / 0评论 2017-01-12

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

display:flex;flex-wrap: wrap;复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-wrap29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit

tianzyc / 0评论 2017-01-10

Flexible 弹性盒子模型之CSS flex-direction

div{display:flex;flex-direction:row-reverse;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-direction29.021.0-webkit-11.010.0-ms-28.01

zhanghao / 0评论 2017-01-09

Flexible 弹性盒子模型之CSS flex-flow

display:flex;flex-flow:row-reverse wrap;效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-flow29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06

JenniferMuMu / 0评论 2017-01-06

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

div:nth-of-type{flex-basis:80px;}效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-basis29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-web

wangnantjobj / 0评论 2017-01-05

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

div:nth-of-type{flex-grow:1;}div:nth-of-type{flex-grow:3;}div:nth-of-type{flex-grow:1;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。定义和用法

wangnantjobj / 0评论 2016-12-30

html5弹性盒子模型宽度设置问题

一个id为container的div包含三个子div，第一个div宽度设置固定200.剩下两个用box-flex属性设置为1;3，为什么最后显示的宽度和预期不一样？col1宽度是200.整个container是600. col2和col3的flex比例是1

来老师 / 0评论 2014-09-16

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局属性之前

葉無聞 / 0评论 2014-08-05

css3弹性盒模型

Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性

葉無聞 / 0评论 2013-07-19

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

上一次,我们已经了解过flex-grow的具体用法后,这周,让我们一起来见一下flex-basis这个属性. flex-shrink 定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，项目缩小。当项目1,2,3,4,5的flex-grow比例改

前端外刊评论 / 0评论 2017-11-29

Flexible 弹性盒子模型之CSS order 属性

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。order29.021.0-webkit-11.028.018.0-moz-9.06.1-webkit-17.0定义和用法order 属性 设置或检索弹性盒模型对象的子元素出现的順序。。请参阅CS

编程爱好者联盟 / 0评论 2017-01-17

Flexible 弹性盒子模型之CSS align-self 属性

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。stretch元素被拉伸以适应容器。center元素位于容器的中心。initial设置该属性为它的默认值。inherit从父元素继承该属性。

前端开发 / 0评论 2017-01-13

Flexible 弹性盒子模型之CSS align-items 属性

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。项目被拉伸以适应容器。center项目位于容器的中心。initial设置该属性为它的默认值。inherit从父元素继承该属性。

编程爱好者联盟 / 0评论 2017-01-12

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

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-wrap29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit-17.0定义和用法flex-wrap 属性规定flex容器是单行或者

编程爱好者联盟 / 0评论 2017-01-10

Flexible 弹性盒子模型之CSS flex-direction

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-direction29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit-17.0定义和用法flex-direction 属性规定灵

编程爱好者联盟 / 0评论 2017-01-09

Flexible 弹性盒子模型之CSS flex-flow

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。属性flex-flow29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit-17.0定义和用法flex-flow 属性是 flex-dire

编程爱好者联盟 / 0评论 2017-01-06

Flexible 弹性盒子模型之flex

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。定义和用法flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。JavaScrip

编程爱好者联盟 / 0评论 2016-12-28

【CSS3】 之 弹性盒子（Flex Box）

Flex布局是什么如何指定一个容器为Flex布局Flex的基本语法displayflex-directionjustify-contentalign-itemsflew-wrapalign-selfflex-flowflexorder 示例 骰子的布局圣杯

编程爱好者联盟 / 0评论 2016-12-04