前端 flex: 1；到底是什么意思？

2024-05-07 05:12:29

`flex: 1;` 到底是什么意思？

首先 flex 是 flex-grow, flex-shrink, flex-basis. 三个属性的简写，默认值为 0 1 auto。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。建议优先写 flex 属性，而不是写三个分离的属性，因为浏览器会自动计算其相关值。

flex-grow 默认为0，只能是正整数。即父元素有剩余空间也不放大元素。如果为 1，则把剩余空间的一份加给自己的宽度。
flex-shrink 默认为1，只能是正整数。即父元素空间不足则按比例收缩。如果为 0，则不收缩
flex-basis 默认为 auto, 即元素本身的大小。这个属性定义了在分配多余空间之前，元素占据的主轴空间，浏览器根据这个属性计算是否有多余空间。可以设置为和 width 和 height 属性一样的值，比如 220px，则元素占据固定空间。

以上大部分是我初次学习 flex 布局记下的笔记内容。

查阅笔记得知，flex 取值有两种情况。一是非负数字，二是长度或者百分比。当 flex 取非负数字时。比如 1 ，则该数字为 flex-grow 的值，flex-shrink 为 1 ，flex-basis 为 0%，则如下是等同的:

.item {flex: 1;
}
.item {flex-grow: 1;flex-shrink: 1;flex-basis: 0%;
}
复制代码

注：当 flex-basis 取值为百分比时根据伸缩父容器的主尺寸计算，如果伸缩父容器的主尺寸没有定义（即父容器宽度取决于子元素）则计算结果和 auto 一样。

最终结果

根据以上分析： flex: 1; 的值是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 意思就是：元素占据剩余宽度的 1 份，收缩比例为 1，因为 flex-basis 具有最高优先级，元素首次分配宽度（flex-direction: colunm; 则为高度）如果父元素有设置宽度，则为 0%；父元素没有设置宽度，则和 auto效果一致。

前端 flex: 1；到底是什么意思？相关推荐

web前端分享JavaScript到底是什么？特点有哪些？
web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...
web前端程序员到底值多少钱？
对于互联网公司来说用户就是上帝,做好客户体验一切才有可能.所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用.那么web前端程序员到底值多少钱? web前端程序员到底值多少钱? ...
前端——flex布局
本来想着每天一更,但开学事情太多了.想着自己好像也不太可能花太多时间去写博客,那就挑一些个人在物联网项目开发中用得多的知识写写哈哈哈.由于只是作为自己学习的记录,所以我的的写作风格比较随性,如有不适, ...
转行互联网，软件测试VS前端编程，到底那个是更好的选择？
作为一个从制造业转行web前端开发的从业者,来回答下这个问题. 首先,看到其他的回答,做测试的说测试好,做前端的说前端好,各有各的看法,虽然本人也是做前端开发的,当然也觉得前端好了(哈哈)但从我进入这 ...
前端js框架到底有哪些？
做前端开发的都知道3大框架:Angular,Vue,React.但是除了这三个框架以外的前端框架还有那些?他们在前端技术的发展中有什么样的作用?哪些网站还在用它们? 下面具体介绍下前端都有那些框架: ...
50岁还在写代码，大龄前端程序员到底有多吃香
大家好呀!我是小千学姐程序员圈流传着这样一个段子:35岁之后,干前端去送外卖:搞后端去开滴滴:运维就去买保险-- 招人不要35岁的,裁人清理35岁的,不知道什么时候开始,35岁成了职业生涯的拐点,中 ...
关于前端flex的使用
通过这两天对前端基础的学习用两个盒子来说,如果想要对<div>的内容进行flex处理,需要在css文件中添加: 常见的flex属性有: flex-direction:column-reve ...
图文学习前端Flex布局
哪吒人生信条:如果你所学的东西处于喜欢才会有强大的动力支撑. 把你的前端拿捏得死死的,每天学习得爽爽的,关注这个不一样的程序员,如果你所学的东西处于喜欢才会有强大的动力支撑. 感谢不负每一份热 ...
好用的前端flex布局，通用的flex布局CSS代码
我的社交恐惧症,主要来自于,收入低??? 今天看到一个图,真是人间真实: 不知道大家上班之后有没有经常写前端,反正身为后端的我是经常写前端的,尤其是调样式调的人痛不欲生,最烦人的是,还要一个像 ...
【前端面试】到底我的简历该怎么写？才有机会被邀请面试？【看此文章即可！！！】
到底我的简历该怎么写?才有机会被邀请面试? Hello,今天我们来分享下简历的编写.对于简历,作为一名刚上大四的学生,肯定很头疼这个问题,感觉自己三年都来,好像除了认真上课外,也没有参加比赛,该怎么办 ...

最新文章

热门文章