flex：auto  将增长值与收缩值设置为1，基本大小为 auto 。

flex：none. 将增长值与收缩值设置为0，基本大小为 auto 。也就是固定大小。

增长：

基本大小 + 额外空间 *（增长系数 / 增长系数总和）

按比例划分额外空间，然后各自分配。

缩小：

基本大小 – 溢出大小 *（缩小系数 * 基本大小 / 各各缩小系数 * 自身大小 之和）

#container {

  display: flex;

  flex-wrap: nowrap;

}

flex-shrink: 1并非严格等比缩小，它还会考虑弹性元素本身的大小。

  • 容器剩余宽度：-70px
  • 缩小因子的分母：1*50 + 1*100 + 1*120 = 270 (1为各元素flex-shrink的值)
  • 元素1的缩小因子：1*50/270
  • 元素1的缩小宽度为缩小因子乘于容器剩余宽度：1*50/270 * (-70)
  • 元素1最后则缩小为：50px + (1*50/270 *(-70)) = 37.03px

均匀增长(直接按设置的比例增长)

将基本大小设置为：0，那么收缩值就不在适用了。

flex:值；或 flex-shrink：0；flex-basis:0;

如：flex:1; flex:2; flex:3. 那么第二个为第一个的2倍宽度，第三个为第一个的3倍宽度。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0px;

        }

        .flexbox-row{

            margin: 50px auto;

            display: flex;

            flex-direction: row;

            width: 120px;

            height: 320px;

            border: 1px #ccc solid;

        }

        .box1{

            flex: 1;

            height: 50px;

        }

        .box2{

            flex: 2;

            height: 50px;

        }

        .box3 {

            flex: 1.5;

            height: 30px;

        }

    </style>

</head>

<body>

<div class="flexbox-row">

    <div class="box box1" style="background-color:coral;">A</div>

    <div class="box box2" style="background-color:lightblue;">B</div>

    <div class="box box3" style="background-color:khaki;">C</div>

</div>

</body>

</html>

flex 增长与收缩的更多相关文章

  1. SQL Server 数据的创建、增长、收缩

    第一步: create database Studio         on primary          (name = 'Studio',filename='E:\DB\Studio.mdf' ...

  2. CSS3：flex布局应用

    想把先前的整理的东西贴出来,怎奈总是有额外事情发生,额,教训电脑要离水杯远点~~ 推荐一本书,<编写可维护的Javascript>这是Nicbolas C.Zakas写的,他的<Ja ...

  3. 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...

  4. css基础--深入理解弹性盒flex布局

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...

  5. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  6. 聊聊Flexbox布局中的flex的演算法

    到目前为止,Flexbox布局应该是目前最流行的布局方式之一了.而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Fle ...

  7. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  8. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  9. css属性之flex属性

    flex属性 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间.是一个简写属性,可以同时设置flex-grow, flex-shrink, flex-basis三个子属性. /* Basic ...

随机推荐

  1. java游戏开发杂谈 - 界面刷新、坐标系

    之前几篇博客里的例子,大家运行过的话,就能看出来,界面是需要刷新的. JPanel里的绘制方法是paintComponent,界面上的东西都是这个方法画出来的. JPanel对象有一个repaint方 ...

  2. Android版数据结构与算法(八)：二叉排序树

    本文目录 前两篇文章我们学习了一些树的基本概念以及常用操作,本篇我们了解一下二叉树的一种特殊形式:二叉排序树(Binary Sort Tree),又称二叉查找树(Binary Search Tree) ...

  3. Eureka服务配置与进阶

    1. Eureka服务配置与进阶 1.1. 主要配置 1.1.1. 服务端(eureka.server.*) enableSelfPreservation默认true,启用注册中心的自保护机制,Eur ...

  4. sqlserver—数据完整性（理论篇）

    数据完整性主要指的是数据的精确性和可靠性,目的就是为了防止数据库中存放的数值,以及字符具有合法性(即按照管理员定义的规则进行存放) 分为以下四类: 实体完整性 实体完整性要求每一个表中的主键字段都不能 ...

  5. Arduino入门笔记（5）：1602液晶实验（实现时钟）

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.Arduino板 https://item.taoba ...

  6. java上传excel到后台解析入库

    背景:最近需要做一个excel模板导入的功能,以便用户可以自己增删改查数据,当然,只有特别的用户才能有此权限,捋了捋思路,还是从前端写起 实现: 页面最后的效果如下,可以自己修改,删除,导入导出数据, ...

  7. ios的跨站脚本限制

    概述 项目中碰到一个问题,就是在ios机上,用iframe内嵌的网页有时需要登录,有时候又不需要登录.查找了半天,终于发现是ios的跨站脚本限制导致的.这里就来介绍下跨站脚本限制,供以后开发时参考,相 ...

  8. 从壹开始前后端分离[.netCore 不定期 ] 36 ║解决JWT自定义中间件授权过期问题

    缘起 哈喽,老张的不定期更新的日常又开始了,在咱们的前后端分离的.net core 框架中,虽然已经实现了权限验证<框架之五 || Swagger的使用 3.3 JWT权限验证[修改]>, ...

  9. 接口测试---Python数据处理需要注意的细节

    一.json模块中的dumps方法 请求接口时params肯定是dict类型的,就是这种{"A":"B"},因为需要传json格式的参数到服务端,但是为了降低c ...

  10. springboot~集成测试里的redis

    测试不应该访问外部资源 对于单元测试,集成测试里,如果被测试的方法中使用到了redis,你需要去模拟一个单机环境的redis server,因为只有这样,你的测试才是客观的,即不会因为网络和其它因素影 ...