flex:默认值；flex:1；flex:auto； 使用

最新推荐文章于 2024-05-12 21:03:21 发布
最新推荐文章于 2024-05-12 21:03:21 发布
阅读量2.6k 收藏 4
点赞数 2
分类专栏： 技术档案 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uglyduckling0412/article/details/120042540
版权

flex不同的值对应意义

flex包含三个属性 flex-grow flex-shrink flex-basis
flex-grow 当前元素是否可以拉伸
flex-shrink 当前元素是否可以压缩
flex-basis 当前元素的宽度
flex:1 对应 flex-grow:1;(可以拉伸)flex-shrink:1;(可以压缩)flex-basis:0%;(填充宽度)
flex:auto 对应 flex-grow:1;(可以拉伸)flex-shrink:1;(可以压缩)flex-basis:auto;(根据内容计算宽度)
flex:默认值 对应 flex-grow:0;(不可以拉伸)flex-shrink:1;(可以压缩)flex-basis:auto;(根据内容计算宽度)
uglyduckling0412
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex:1 | 0 | auto | none
qq_45059405的博客
04-02 1064
flex: 1 | 0 | auto | none
flex-container:使用Flex
03-27
1. **流方向**：默认情况下，子元素沿主轴（flex-direction的默认值为row）排列。 2. **弹性行为**：子元素可以伸缩，以适应容器大小的变化。 3. **独立布局**：子元素的宽度和高度不再受传统盒模型的影响，而是根据...
flex: 0 auto=默认；flex：1 = flex : 1 1 0%；flex: none = flex: 0 0 auto；flex: auto = flex: 1 1 auto；
jack_rose_me的博客
09-01 1458
flex：1 ->> flex : 1 1 0%; flex: none ->> flex: 0 0 auto; flex: auto ->> flex: 1 1 auto; flex: 0 auto; 或者 flex: initial -->> flex: 0 1 auto; 即为flex的初始值
彻底搞懂flex: 1，flex: auto，flex: 0
程序员成长指北
05-12 665
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群我们在日常使用flex布局的时候，经常会用到 flex 缩写。flex简写设置了项目如何增大或缩小以适应在容器中可用的空间。flex简写属性在下面有三个值的定义 默认值为 0 1 auto;flex-grow :定义项目的放大比例，默认为0flex-shrink :定义项目的缩小比例,默认为 ...
flex布局中flex:1和flex:auto的区别
weixin_39808181的博客
02-26 9765
在flex:1 时在尺寸不足时会优先最小化尺寸，flex:auto在尺寸不足时优先最大化内容尺寸。 效果如下所示： flex：1 的尺寸是较长的尺寸优先牺牲自己的尺寸，而flex:auto 中是较长的尺寸优先扩展自己的尺寸。 所以，flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用 ...
flex:1及flex取值的理解
锦锦_jane的博客
09-08 4848
1. flex布局 参照：阮一峰的文章 2. flex:1的理解 2.1 概念 flex：是 flex-grow、flex-shrink、flex-basis的缩写，默认值为0 1 auto。后两个属性可选 剩余空间：父容器在主轴方向上的可用空间。 2.2 flex属性 2.2.1 flex-grow 2.2.2 flex-shrink 2.2.3 flex-basis 2.3 flex的取值 2.4 例子 2.5 参考文章
flex: 1 和 flex: auto 的区别
Chloeeeeeeee的博客
04-13 1178
flex: 1 将会根据可用空间**平均分配**剩余空间，而 flex: auto 将会**根据内容大小来分配**剩余空间。
flex：auto含义
包磊磊的博客
03-06 2691
flex设置成1和auto有什么区别 首先明确一点是，flex是flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况： flex的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则flex的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px; } ...
使用flex布局时宽度auto的元素内容溢出
Liu
03-30 210
当flex布局的item元素设置为自适应宽度，但是他的实际宽度较大时就会溢出父元素，如下。
Sneakers_flex_test：使用CodeSandbox创建
02-16
标题 "Sneakers_flex_test：使用CodeSandbox创建" 提到的是一个关于前端开发的项目，特别是使用CodeSandbox工具来实现的。CodeSandbox是一个在线的代码编辑器，专为创建、共享和协作Web应用程序，特别是React、Vue和...
flex_component.zip_flex
09-19
例如，`flex: 1 0 auto;` 等同于 `flex-grow: 1; flex-shrink: 0; flex-basis: auto;`。 - `align-self: stretch`是默认值，使得项目在交叉轴上拉伸填满整个容器，除非被其他属性覆盖。 这份文档详细列举了这些...
chapter1_flex_html_
09-30
1. `flex-start`：这是`justify-content`的默认值，所有项目会沿着主轴的起始位置堆叠。在垂直布局中，元素会靠左或顶部对齐；在水平布局中，元素会靠上或左侧对齐。 2. `flex-end`：与`flex-start`相反，这个值会...
Flex布局笔记.docx
12-07
- `flex`：属性简写，一次设置`flex-grow`, `flex-shrink`和`flex-basis`，如`flex: 1 0 auto`表示增长比例为1，不收缩，基础大小为自动。 通过这些属性的组合使用，开发者可以创建出各种复杂的动态布局，适应不同...
flex-direction的默认值
liulei21的专栏
07-08 2651
在react中flex-direction 的默认值是Colum 其他原生和Vue中flex-direction的默认值为row
【总结】flex布局的属性与值
Seven的博客
07-02 588
【总结】flex布局的属性与值1.什么是flex布局2.容器的属性2.1 flex-direction属性2.2 flex-wrap属性2.3 flex-flow2.4 justify-content属性2.5 align-items属性2. 6 align-content属性3. 项目的属性3.1 order属性3.2 flex-grow属性3.3 flex-shrink属性2.4 flex-basis属性2.5 flex属性3.6 align-self属性 1.什么是flex布局 Flex 是 Fle
Flex布局做出自适应页面--语法和案例
热门推荐
某年某月某条街
01-20 4万+
本文发布在： github项目地址：https://github.com/tenadolanter/flex-layout-demo SegmentFault地址：https://segmentfault.com/a/1190000012916949/ CSDN地址：http://blog.csdn.net/qq_34648000/article/details/79115294 博客
flex布局详解
西凉的悲伤博客
11-16 4963
目录说明display属性flex-direction属性主轴与交叉轴justify-content属性align-items属性flex-wrap属性flex-flow属性align-content属性align-self属性order属性flex-grow属性flex-shrink属性flex-basis属性flex属性row-gap与column-gap属性gap属性其他示例 说明 目前没有使用flex布局的代码如下，后面的flex布局示例都会在此示例的flexTest样式上增加代码以做说明。 &lt
对于flex：1的详细解释，flex：1
imkaifan的博客
06-23 4396
对于flex：1的详细解释，flex：1
flex布局中如何改变默认主轴
m0_74086230的博客
10-08 1145
flex布局中主轴转换
display:flex:1:1设置
最新发布
06-13
`display: flex: 1:1` 是 CSS 中 Flexbox 布局的一部分，它用于定义弹性容器（flex container）内子元素的布局和尺寸分配。这里的 `flex` 属性被分成了两部分： 1. `display: flex`：这行代码设置了元素的布局模式为 Flexbox。这意味着该元素将成为一个 Flex 容器，其子元素将根据 Flexbox 规则进行排列。 2. `1:1`：这是两个值，分别对应 `flex-grow`, `flex-shrink`, 和 `flex-basis` 三个属性。在没有明确指定的情况下，默认值是 `0 1 auto`，但这里写法稍有不同，可能有两种解释： - 如果你是想用简化的语法（CSS Custom Properties 或 `calc()` 函数），`1:1` 可能是尝试表示 `flex-grow: 1, flex-shrink: 1`，这意味着每个子元素都将平均分配可用空间（`grow` 和 `shrink` 都为 1），并且它们的初始基础宽度 (`flex-basis`) 相等。 - 如果语法错误，那么这可能不是一个有效的写法，`flex` 属性通常以冒号分隔不同的值，如 `flex: 1 1 auto`，其中 `1` 表示所有子元素都将扩展以填充可用空间，`1` 表示同样缩放，`auto` 指定基础大小由内容决定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值