前端八股学习1.0之flex:1的含义

mky-ze

已于 2022-02-18 22:32:34 修改

阅读量318

点赞数

分类专栏：前端八股文章标签：前端 css css3

于 2022-02-12 18:04:14 首次发布

本文链接：https://blog.csdn.net/EZNGUP/article/details/122899910

版权

前端八股专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中flex属性的使用，特别是`flex:1`和`flex:1 1 auto`的区别。`flex:1`等同于`flex:1 1 0%`，它会让元素平均分配剩余空间。同时解释了`flex-grow`、`flex-shrink`和`flex-basis`的作用，帮助理解flex布局在响应式设计中的应用。

摘要由CSDN通过智能技术生成

flex: 1;===flex: 1 1 auto;
flex: 1;
	flex-grow: 1; //空间扩展的比例
	flex-shrink: 1;	//空间收缩的比例
	flex-basis: 0%; //空间扩展或收缩的基准值

综上所述flex: 1实现的效果是平分空间

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mky-ze

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

2024前端面试八股文

04-23

### 2024前端面试八股文精要解析 #### CSS部分 1. **display的block、inline和inline-block的区别** - **block**：此类元素会独占一行，这意味着在同一行上不能存在其他的block元素。block元素可以设置宽度（`...

flex：1 到底什么意思它是哪些属性的简写属性

weixin_45836027的博客

08-22

5236

flex：1

参与评论您还未登录，请先登录后发表或查看评论

【css】flex弹性布局中的flex：1 到底是什么意思？

呆呆狗

01-30

9415

flex弹性布局中的flex：1 到底是什么意思？ flex-basis flex-shrink flex-grow

前端常见面试题---flex:1 是什么？

idiot_MAN的博客

09-27

3137

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。含义：将剩下得600-100-200=300px 平分为3份，flex-grow :1 占1份、flex-grow :2 占2份。flex-shrink:定义了项目得缩小比列，默认值为1，即如果空间不足，将该项目缩小。

flex:1的含义 (超级详细)

weixin_53541596的博客

07-20

5206

flex：1超级详细的解释

详解 flex:1 到底是什么

dongwei666的博客

08-10

7246

成功搞懂了flex:1是什么意思！

2024前端面试八股文2024前端面试八股文2024前端面试八股文

最新发布

08-17

2024前端面试八股文2024前端面试八股文2024前端面试八股文2024前端面试八股文2024前端面试八股文

2023前端面试八股文.pdf

04-03

在前端面试中，JavaScript 是一个核心话题，对于求职者来说，深入理解其数据类型、类型检测以及特殊值如 null 和 undefined 的区别至关重要。...不断学习和实践，才能在竞争激烈的前端领域保持竞争力。

bagu:前端八股知识点-速记脑图

04-06

【前端八股知识点详解】在前端开发领域，"八股文"是指一些常见的、基础但重要的知识点，它们是每个前端开发者必备的技能。这个名为"bagu"的资源，可能是为了帮助开发者快速记忆和理解这些关键概念而创建的一个脑图...

最强面试八股文-前端篇

10-05

【前端篇】是针对前端开发者的面试准备指南，包含了HTML、CSS、JavaScript等多个方面的知识点。...为防止恶意嵌套，可以设置`X-Frame-Options`响应头或使用`Content-...通过不断学习和实践，才能在求职面试中脱颖而出。

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

weixin_59519449的博客

04-13

1万+

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，只能是

前端布局 Flex（弹性）布局

qq_63512287的博客

10-15

1万+

前端布局中的Flex布局

【CSS】由 flex: 1; 引发的思考

'Ablaze 的专栏

01-09

6712

首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。 flex-grow 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 flex-shrink 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis 属性：定义了在分配多余空间之前，项目占据的主轴空间（main size

flex布局切记，最外层要加：{{flex：1}}

iot3000的博客

10-28

3621

View style={{ flex: 1 }}> Tabs> TabPane tab="Tab01" key="junior"> Text>{"Tab内容001"}Text> TabPane> TabPane tab="Tab02" key="middle"> Text>{"Tab2内容002"}Text> TabPane> Tabs> View>;

flex:1详解

热门推荐

莉兹Liz的博客

01-14

4万+

flex：1是什么意思首先介绍一下 flex MDN中是这么定义的 CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。 flex-grow CSS flex-grow 属性定义弹性盒子项（flex item）的拉伸因子。 flex-grow 用法是这个样子的...

css中flex:1弹性布局例子

disadministrator的专栏

01-19

6719

#main { width: 220px; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items:

flex设置成1和auto有什么区别

weixin_34270606的博客

04-25

5882

首先明确一点是，flex是flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况： flex的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则flex的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; ...

web前端之 flex布局-----（ flex布局的好处）

CS13477062349的博客

02-06

1万+

例如：我们在写经典的筛子布局如果用传统的position 浮动来写：如第一个筛子： div class="div1"> p>p> div> 样式就写得很麻烦，又由于每个筛子中的点的距离不一样，每个筛子都有不同的 left top定位，每个筛子都得写样式，所以这里就有了flex布局 .div1{ width:100px; height:100p

flex详解-flex:1详解

前端-专栏

01-08

3143

flex详解-flex:1详解 flex:有如下属性 -----begin 属性-------- flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 flex-basis 项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。 a...

程序员精选知识星球八股文第二版：精华浓缩

"《知识星球最强八股文第二版》是一份针对IT行业尤其是Java技术领域的深度学习资料。该文档由程序员Carl精心编撰，集合了众多获得大厂Offer的程序员们的实战经验和精华内容，旨在帮助读者提升技能、理解和掌握关键...