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

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

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

本文主要包含css3 flexbox,css3 flexbox实验场,flexbox,flexbox布局,css flexbox等相关知识,佚名 希望在学习及工作中可以帮助到您
在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的实际结果就会越小 </div>

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

  • 基础的CSS3弹性盒Flexbox布局使用实例
  • CSS3的Flexbox布局的简明入门指南
  • css3弹性盒模型(Flexbox)详细介绍
  • CSS3 Flexbox中flex-shrink属性的用法示例介绍
  • 利用CSS3的flexbox实现水平垂直居中与三列等高布局

相关文章

  • 2017-06-02CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
  • 2017-06-02CSS3制作ajax loader icon实现思路及代码
  • 2017-06-02利用CSS的Sass预处理器(框架)来制作居中效果
  • 2017-06-02CSS3中31种选择器使用方法教程
  • 2017-06-02利用CSS3的transition属性实现滑动效果
  • 2017-06-02一款利用html5和css3实现的3D滚动特效的教程
  • 2017-06-02让IE支持CSS3的不完全兼容方案
  • 2017-06-02用CSS3的box-reflect设置文字倒影效果的方法讲解
  • 2017-06-02纯css3(无图片/js)制作的几个社交媒体网站的图标
  • 2017-06-02CSS3实现的闪烁跳跃进度条示例(附源码)

文章分类

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

最近更新的内容

    • 基于css3实现漂亮便签样式
    • 纯CSS3实现3D旋转书本效果
    • CSS3制作圆角图片和椭圆形图片
    • 利用CSS3实现单选框动画特效示例代码
    • 使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
    • 解决CSS3的opacity属性带来的层叠顺序问题
    • 详解CSS3阴影 box-shadow的使用和技巧总结
    • 一款利用纯css3实现的win8加载动画的实例分析
    • css3 按钮样式简单可扩展创建
    • 深入理解css属性的选择对动画性能的影响

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

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