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. HBase的下载、安装与配置

    声明:作者原创,转载注明出处. 作者:帅气陈吃苹果 (一)安装 下载.解压: wget http://mirror.bit.edu.cn/apache/hbase/1.3.1/hbase-1.3.1- ...

  2. JavaScript实现登录窗口的拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. cocos creator主程入门教程（四）—— 网络通信

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 前面已经介绍怎样加载资源.管理弹窗.开发一个网络游戏,难免要处理网络通信.有几点问题需要注意: 1.服务 ...

  4. docker同时删除多个容器

    查询所有容器 sudo docker ps -a 同时删除多个符合筛选条件的容器,例如删除状态为“exited”的容器 docker rm $(docker container ls -f " ...

  5. OAuth2.0记录

    阮一峰老师讲解OAuth2.0 http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 举例详解: https://www.cnblogs.com/ ...

  6. 关于thinkphp5手动抛出Http异常时自定义404页面报错的问题

    在使用HttpException手动抛出异常时,希望跳转到自定义的错误页面,官方的文章中是这样描述的. 可以使用\think\exception\HttpException类来抛出异常 // 抛出 H ...

  7. 解决小米手机USB安装apk时AS报错：INSTALL_FAILED_USER_RESTRICTED

    今天,直接用AS在小米手机上运行安装的时候总是报错:INSTALL_FAILED_USER_RESTRICTED,于是乎,通过以下方式解决: 在开发者选项将USB安装打开,然后,哈,解决了.记录一下.

  8. python3第一天，随便写写

    哈哈 我滴第一篇博客,不知道咋写,随意看了看别人的博客,我还是不知道咋写,既然是我的博客,那我就把它当随笔写了(这里就是添加随笔...) 也不知道自己说了啥,不过想到了一句话:日记都是写给别人看的.哈 ...

  9. gin+gorm

    在[环境变量]中添加如下[用户变量]/[系统变量]:GO111MODULE,值为on go mod init目录 在项目中新建文件main.go,并添加测试代码 package main import ...

  10. 微服务与RPC

    1.微服务架构 1.1 特征 自动化部署,端点智能化,语言和数据的去中心化控制. 1.2架构 一种将一个单一应用程序开发为一组小型服务的方法,每个服务运行在自己的进程中,服务间通信采用轻量级通信机制( ...