Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【说站】css中flex-shrink属性是什么

【说站】css中flex-shrink属性是什么

作者头像
很酷的站长
发布于 2022-11-24 09:09:50
发布于 2022-11-24 09:09:50
71000
代码可运行
举报
运行总次数:0
代码可运行

css中flex-shrink属性是什么

1、flex-shrink指的是当flex容器空间不足时候,单个元素的收缩比例。

2、不支持负值,默认值是1,也就是默认所有的flex子项都会收缩。如果设置为0,则表示不收缩,保持原始的宽度。

实例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// CSS部分
.content{
    display: flex;
    width: 400px;
    height: 200px;
    border: 1px solid;
}
 
.left, .center, .right{
    height: 200px;
}
 
.left{
    width: 100px;
    background-color: aqua;
}
.center{
    width: 200px;
    background-color: bisque;
}
.right{
    width: 300px;
    background-color: cadetblue;
}

以上就是css中flex-shrink属性的介绍,希望对大家有所帮助。更多css学习指路:css教程

本文教程操作环境:windows7系统、css3版,DELL G3电脑。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
别再用 float 布局了,flex 才是未来!
前面一篇文章整体介绍了 CSS 的布局知识,其中说到 float 布局是 CSS 不断完善的副产物。而在 2023 年的今天,flex 这种布局方式才是未来!那么今天我们就来学习下 flex 弹性布局。
陈树义
2023/09/19
6860
别再用 float 布局了,flex 才是未来!
【说站】css中flex-basis属性是什么
2、默认值是auto,即自动。如果有设置width,占用空间就是width。如果没有设置,按照内容宽度。若同时设置width和flex-basis,则在渲染性能方面,将忽略width。
很酷的站长
2022/11/24
4120
【说站】css中flex-basis属性是什么
【说站】css中flex是什么
以上就是css中flex的介绍,希望对大家有所帮助。更多css学习指路:css教程
很酷的站长
2022/11/24
6830
【说站】css中flex-flow属性是什么
1、flex-flow属性是flex-direction和flex-wrap属性的复合属性。
很酷的站长
2022/11/24
4680
【说站】css中flex-flow属性是什么
【说站】css中flex-grow属性是什么
1、flex-grow指扩展flex子项所占据的宽度,扩展的空间就是除去元素外剩余的空白间隙。
很酷的站长
2022/11/24
6330
【说站】css中flex-grow属性是什么
【说站】css中align-items属性是什么
1、align-items中的items指的是flex 中的子项,因此align-items指的就是flex子项们相对于flex容器在垂直方向上的对齐方式。
很酷的站长
2022/11/24
8980
【说站】css中align-items属性是什么
【说站】css浮动有哪些特性
可以设置width和height,所以float通常用来制作横向配列的菜单,可以设置大小和横向排列。
很酷的站长
2022/11/23
4750
【说站】css浮动有哪些特性
【说站】css中flex-direction属性是什么
1、flex-direction用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。
很酷的站长
2022/11/24
4990
【说站】css中flex-direction属性是什么
【说站】css中clear属性是什么
1、用于规定元素哪一侧不允许浮动元素,默认值为none,表示不清除,左右两侧允许浮动元素。
很酷的站长
2022/11/23
5570
【说站】css中clear属性是什么
【说站】css定位叠放次序是什么
2、z-index可以用来控制盒子的前后顺序(z轴)。值可为正整数、负整数或0,默认auto,值越大,盒子越高。
很酷的站长
2022/11/24
3170
【说站】css中justify-content属性是什么
2、应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。
很酷的站长
2022/11/24
7140
【说站】css中justify-content属性是什么
【说站】css清除浮动的原因
2、使用浮动后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以打开其高度,所以父级元素的height会被忽略。
很酷的站长
2022/11/23
6550
【说站】css清除浮动的原因
【说站】css中BFC布局规则是什么
以上就是css中BFC布局规则的介绍,希望对大家有所帮助。更多css学习指路:css教程
很酷的站长
2022/11/23
3080
【说站】css中BFC布局规则是什么
【说站】css中盒模型的注意点
3、marked在Flexbox或网格布局中,不存在margin-top、bottom叠加及margin-top传递现象。
很酷的站长
2022/11/24
2160
【说站】css中盒模型的注意点
css基础教程之flex布局
二、flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置
老雷PHP全栈开发
2020/07/02
5990
【说站】css定位叠放次序的使用注意
只有相对定位,绝对定位,固定定位有这个属性,其他标准流,浮动,静态定位都没有这个属性,不能指定这个属性。
很酷的站长
2022/11/24
3060
【说站】css中sticky属性有什么特点
也就是说,如果你设置了top:50px,当sticky元素到达相对定位元素顶部50px的位置时,固定,不再向上移动。
很酷的站长
2022/11/23
3130
【说站】css中sticky属性有什么特点
【说站】css中order属性的介绍
2、order属性用于提供有关弹性容器中其他弹性项目的每个弹性项目的顺序。 如果商品不灵活,那么order属性将毫无用处。
很酷的站长
2022/11/24
1.1K0
【说站】css中order属性的介绍
【说站】css中固定定位fixed是什么
1、固定定位是元素固定在浏览器可视区的位置。固定定位也可以算是一种特殊的绝对定位。
很酷的站长
2022/11/24
5690
【说站】css中translate函数的用法
2、这在一些典型的用户界面上更好用,而且这样就无需在transform中声明该函数并记住转换函数的确切顺序了。
很酷的站长
2022/11/24
6570
【说站】css中translate函数的用法
相关推荐
别再用 float 布局了,flex 才是未来!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验