• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS3 Flexbox中flex-shrink属性的用法示例介绍

CSS3 Flexbox中flex-shrink属性的用法示例介绍

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS3,Flexbox,flex-shrink等相关知识,佚名 希望在学习及工作中可以帮助到您
在CSS3 Flexbox中flex-shrink属性定义为:

This <number> component sets ‘flex-shrink’ longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to ‘1’. The flex shrink factor is multiplied by the flex basis when distributing negative space.

通俗来讲就是当flex items的大小超过了flex container时, 各个flex item的压缩比例, 请看下面的示例:


根据以上结果可知flex-shrink值越大,flex item的实际结果就会越小

您可能想查找下面的文章:

  • 使用CSS3制作一个简单的进度条(demo)
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果
  • CSS3实现自定义Checkbox特效实例代码
  • 总结30个CSS3选择器
  • CSS3模拟动画下拉菜单效果
  • CSS3动画:5种预载动画效果实例
  • CSS3 仿微信聊天小气泡实例代码

相关文章

  • 2017-08-06将样式表放在页面顶部
  • 2017-08-06table中td内容换行问题
  • 2017-08-06将ul+li 分两列显示(横向显示)的方法
  • 2017-08-06网络广告的发展历程的详细分析与心得体会(图文)
  • 2017-08-06CSS的ul和li实现横向排列和去掉li的点
  • 2017-08-06display:inline的用法
  • 2017-08-06详解css中的display属性
  • 2017-08-06div背景颜色怎样渐变 css实现div层背景颜色渐变代码
  • 2017-08-06使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码
  • 2017-08-06Discuz7.2 IE9兼容性写法 杜工完全修补方案

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • BAT及各大互联网公司2014前端笔试面试题(Html,Css篇)
    • css box-shadow阴影不透明的解决办法
    • CSS3实现头像旋转效果
    • 全面了解css行高line-height的用法
    • CSS3条纹背景制作的实战攻略
    • 下拉框select样式改写具体实现
    • html div 透明样式示例代码
    • 利用CSS3实现平移动画效果示例代码
    • CSS毛玻璃效果如何实现
    • 左右两列自适应中间列内容即随中间内容高度自适应的布局

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有