flex:1；到底代表什么

前言：在最初学习flex布局的时候，关于flex: 1;的概念很模糊，只是简单的认为flex: 1; 代表一份； flex: 2;代表两份。。。。后面遇到了关于弹性布局的一系列问题，于是将这个属性好好研究了一下。

其实，flex:1; 是三个属性的简写，完整写法应该是： flex: 1 1 0%;

第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

经常用作自适应布局，内容区会自动放大或缩小占满剩余空间。在chrome浏览器上也可以将flex: 1; 直接展开查看详情

flex: 2;

下面有几个flex布局的常用场景：
1、一个元素宽度（或高度）固定，另一个元素宽度（或高度）自适应。

.parent {display: flex;
}
// 高度/宽度固定
.son1 {width: 200px; //或者 height: 200px;flex: none; // 加不加都可 相当于flex: 0 0 auto;
}
// 高度/宽度自适应
.son2 {flex: 1;  // flex: 1 1 0%;
}

2、子元素都设置flex: 1; 子元素盒子会平分并占满父盒子；

<div class="container"><div class="div">我是一个div</div><div class="div">我是一个很多字div</div><div class="div">我是一个更多字而且第三个div</div>
</div>
<style>
.container{display: flex;
}
.div{border: 1px solid red;flex: 1;
}
</style>

3、那么如果设置 flex: 1 1 auto;呢？子元素盒子会根据自己的内容来适配并一起占满整个空间；

<div class="container"><div class="div">我是一个div</div><div class="div">我是一个很多字div</div><div class="div">我是一个更多字而且第三个div</div>
</div>
<style>
.container{display: flex;
}
.div{border: 1px solid red;flex: 1 1 auto;
}
</style>

flex:1；到底代表什么相关推荐

python统计字符串中数字个数 socket_Python中socket中的listen()里参数(数字)到底代表什么？...
在调用socket的时候,我们会使用到listen()函数,里面有个参数叫backlog, 例如:socket.listen(5). 那么这个数字5到底代表什么意思呢? 解答下面使用具体的代码片段来 ...
什么时候会是用treeset?_flex:1 到底代表什么?
今天在做项目的时候遇到一个关于布局的问题, 就是 flex: 1; 我一直以为 flex: 1; 代表的是 flex: aoto; 后来发现结果并不是这样, 所以写一篇博客来讲解一下 flex: 1; ...
主板上的内存插槽颜色到底代表了什么意思？
黄色和橙色.蓝色和黑色.绿色和红色:我们常常会发现主板上的内存插槽有着各种各样的颜色配对.可是到底这些颜色配对意味着什么,它们对你配置的系统或升级当前硬件有着什么样的影响呢? 问题 SuperUser ...
stm32常用数据类型 U8、U16、U32到底代表什么？
stm32常用数据类型 U8.U16.U32到底代表什么? 在Keil MDK 开发环境里,比如一个无符号32位整形数据会有很多种表示方法: 1.unsigned int 32 (C语言标准表达方法 ...
数据库中数据长度到底代表什么呢？
即使已经参加工作快满一年了,但是却连数据库里面数据的长度都一直没搞清楚到底代表什么意思. 类型是指数据存储类型,这个大家都知道,比如int类型代表4字节(Byte),1字节=8bit,即1B=8b.子 ...
int mysql_「MYSQL」MYSQL中的int(11)到底代表什么意思？
一.前言在工作中经常要与mysql打交道,但是对mysql的各个字段类型一直都是一知半解,因此写本文总结记录一番. 二.简介对于int类型的一些基础知识其实上图已经说的很明白了,在这里想讨论下常用 ...
MySql 中的 int(11) 到底代表什么意思？
对于 int 类型的一些基础知识其实上图已经说的很明白了,在这里想讨论下常用的 int(11) 代表什么意思,很长时间以来我都以为这代表着限制 int 的长度为 11 位,直到有天看到篇文章才明白 ...
概率分布，独立同分布在图像分类与检测中到底代表什么？
概率分布,与图像到底是什么关系? 举个例子就明白了: 比如一个训练集的图像,里面有很多张图像,假如要检测一张图像是不是属于猫,p(x)就是边缘概率,其中x代表随机事件,这个事件可以映射成一个具体的值, ...
JS中function(e) 其中的e到底代表什么
在学习js的时候我跳过了一部分章节的内容,导致现在学习react的时候很多内容都不知所措,因为这些教程都是建立在它认为你js所有内容都掌握的前提下,当然这是我自身的原因.需要反省. 下面是正题: 我 ...

flex:1；到底代表什么

flex:1；到底代表什么相关推荐

最新文章

热门文章

flex:1； 到底代表什么

flex:1； 到底代表什么相关推荐

最新文章

热门文章

flex:1；到底代表什么

flex:1；到底代表什么相关推荐