flex 增长与收缩入门百科_布局零基础入门

flex:auto 将增长值与收缩值设置为1,基本大小为 auto 。flex:none. 将增长值与收缩值设置为0,基本大小为 auto 。也就是固定大小。 增长:基本大小 + 额外空间 *(增长系数 / 增长系数总和) 按比例划分额外空间,然后各自分配。 缩小:基本大小 – 溢出大小 *(缩小系数 * 基本大小 / 各各缩小系数 * 自身大小 之和

flex 增长与收缩入门百科

 

flex 增长与收缩入门百科_布局零基础入门

增长:

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

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

 

缩小:

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

flex 增长与收缩入门百科_布局零基础入门

#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>
海计划公众号
(0)
上一篇 2020/03/31 01:50
下一篇 2020/03/31 01:50

您可能感兴趣的内容

  • SDK 与API之间的关系和联系新手入门_api小白知识

    SDK(Software Development Kit,软件开发工具包)一般都是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合,比如提供安卓开发工具、或者基于硬件开发的服务等。也有针对某项软件功能的SDK,如推送技术、图像识别技术、移动支-付技术、语音识别分析技术等。常用的一些SDK:百-度地-图SDK、微-信支

    2020/03/24
  • 数字尾巴入门基础知识分享美好数字生活

    数字尾巴零基础入门 官方网址:http://www.dgtle.com/ 简介描述:分享美好数字生活 致力于分享美好数字生活体验,囊括你闻所未闻的最丰富数码资讯,触所未触最抢鲜产品…

    2020/03/06
  • Js怎么清除cookie?基础入门_cookie使用教程

    当web服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。Cookie是为了解决“如何记住用户信息”而发明的。有时为了我们的信息安全需要清除Cookie,我们该如何做呢?javascript清除cookie的方法:使用JavaScript清理Cookie首先要找到该Cookie对应的Name对应的值,然后设置其为过期:找到Cookie有下面方法:

    2020/03/22
  • Directus入门指南_一个功能丰富的环境用于自定义数据库模式的快速开发和管理

    Directus入门指南 官方网址:https://directus.io GitHub:https://github.com/directus/directus 简介描述:一个功…

    2020/03/08
  • 巧用CSS属性值正则匹配选择器新手入门_选择器菜鸟指南

    巧用CSS属性值正则匹配选择器新手入门 属性值正则匹配选择器包括下面3种: [attr^=”val”] [attr$=”val”] …

    2020/03/20
  • vue懒加载小白攻略_懒加载小白基础

    一、 什么是懒加载懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。二、为什么需要懒加载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时1、路由懒加载:exp

    2020/03/23
  • Fundebug基础知识教程_一行代码搞定BUG监控!

    Fundebug基础知识教程 官方网址:https://www.fundebug.com/ 简介描述:一行代码搞定BUG监控! Fundebug提供全栈错误监控服务,通过邮件、钉钉…

    2020/03/06
  • MagicaVoxel新手入门_3D像素建模设计工具

    MagicaVoxel新手入门 官方网址:http://ephtracy.github.io/ 简介描述:3D像素建模设计工具 MagicaVoxel是一款立体像素设计软件,关于渲…

    2020/03/11
  • HTTPS 如何保证数据传输的安全性入门基础知识_http教程视频

    大家都知道,在客户端与服务器数据传输的过程中,HTTP协议的传输是不安全的,也就是一般情况下HTTP是明文传输的。但HTTPS协议的数据传输是安全的,也就是说HTTPS数据的传输是经过加密的。在客户端与服务器这两个完全没有见过面的陌生人交流中,HTTPS是如何保证数据传输的安全性的呢?下面我将带大家一步步了解HTTPS是如何加密才得以保证数据传输的安全性的。

    2020/04/03
  • 搜狐IT使用帮助聚合互联网、智能硬件、创业投资、通讯数码等科技资讯的媒体平台

    搜狐IT使用攻略 官方网址:http://it.sohu.com/ 简介描述:聚合互联网、智能硬件、创业投资、通讯数码等科技资讯的媒体平台 搜狐科技是聚合互联网、智能硬件、创业投资…

    2020/03/06
  • Vue-cli 3.0配置反向代理指南教程_cli小白知识

    在项目根目录下新建vue.config.js,它是一个可选的配置文件,新建该文件,存放在项目根目录(将自动加载)中。自Vue CLI 3开始,项目中所有的配置信息都写在这个文件中。配置反向代理如下:// vue.config.js
    module.exports = {devServer: {host: ‘0.0.0.0’,//设置主机地址port: 8040

    2020/04/03
  • Bonsai.js入门攻略一个强大的超棒轻量级javascript图形类库

    Bonsai.js基础入门 官方网址:http://bonsaijs.org/ GitHub:https://github.com/uxebu/bonsai/downloads 简…

    2020/03/05
  • 机器学习因果推理菜鸟教程网_机器菜鸟指南

    人工智能先驱、贝叶斯网络之父、美国计算机科学家 Judea Pearl 在最近的一篇论文中解释了基于数据统计的机器学习系统的一些局限性。要理解“为什么”,并回答“如果……会怎样”之类的问题,我们需要某种因果模型。在社会科学领域,尤其是流行病学中,一种名为“结构因果模型”(SCM)的革命性数学框架已经被广泛采用。Pearl 介绍了这种模型可以处理的七个任务,虽

    2020/03/24
  • 揭秘《幸运飞艇走势技巧规律》计划公式与个人实战分享入门基础教程_广告入门指南

    想了解更多知识加飛虎团队免费咨询:1298483136或者vx:a1298483136一般新手大家开头来到飞艇这个游戏里来,最先做的就是要好好掌握一些必要的飞艇的小技巧,这样的做法是让大家可以更合理的去把握时机,目前为止除了某些大神外还基本上没听说过有几个玩家能依靠自己的感觉和运气在不断的赢下去,所以掌握这些小技巧对于新手大家来说,是非常必要的,也是磨练概率

    2020/03/29
  • js基础:原型和原型链新手入门_原型基础指南

    本文研究一下Javascript的核心基础——原型链和继承。对于使用过基于类的语言(如Java或C#)的人来说,Javascript的继承有点难以搞懂,因为它本身没有class这种东西。(ES6中引入了class关键字,看上去也像传统的OOP语言,但是那只是语法糖,底层还是基于原型)。原型链MDN上对于原型链的解释:当谈到继承时,JavaScript 只有一

    2020/03/24
  • Js中的 this 工作原理基础知识教程_原理小白教程

    一、问题的由来学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。var obj = {foo: function () {}
    };
    var foo = obj.foo;
    // 写法一
    obj.foo()
    // 写法二
    foo()上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样。请看下面的例子。va

    2020/03/22