Flex入门基础——项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）

比眉伴天荒 2022-07-15 09:55 267阅读 0赞

1、order

取值：数值

功能：（1）容器中有多个项目，

（2）项目的默认摆放时沿主轴（纵向）方向，即按文档中dom元素的书写顺序进行排列的；

应用：order属性用于更改在主轴方向上排列顺序。

order数值越小，排列越靠前，默认为0，可以为负数。

注意：order它与主轴的方向有关系（默认情况为主轴的方向）

.container{ width:100px;height:100px; flex-flow:column wrap; } .item1{ order:-1; } .item2{ order:1; } <div class="container"> <div class="item1">1</div> <div class="item2">2</div> </div>

**现象：1排列在2的前边。**

2、flex-grow

取值：数值

功能：放大因子

默认值为0，表示不去放大。

a、使用前提：主轴方向上有多余的空间可以让项目去“伸展”

b、计算步骤

（1）统计多余的空间：M=容器的宽度-所有项目的宽度

（2）确定均分的份数：N=项目flex-grow的值之和

（3）计算单位空间：P=M/N

（4）项目放大后的宽度：R=宽度+P\*当前flex-flow值

使用方法：如上述代码示例中，若设置第一个item1——flex-grop：0，第二个item2——flex-grop：1

结果：第一个为默认的大小，第二个若容器项目有多余的空间，即会放大在item2上边。

结论：

如果一个项目flex-grow：0，则它的宽度不会放大

项目flex-grow越大，说明它在放大后，会得到更多的空间

项目flex-grow越小，说明它在放大后，会得到更少的空间

特别的：如果所有的项目有一样的flex-grow，它们会等分多余的空间，

也就是说，放大后大小=自身的大小+等值分配的大小

3、flex-shrink

取值：数值

功能：缩小因子

使用前提：主轴方向上的空间不够，项目被压缩。

默认值为1（当项目主轴方向不能容下全部项目，并且不允许换行。

由于flex-shrink为1，所有项目都会被压缩。）

各自被压缩的数值是不一样的，如下公式：

（1）总差值，即需要被压缩的大小：M=容器的宽度-项目的宽度之和

（2）加权和：N=flex-shrink  \*项目宽度值之和

（3）缩小后的宽度=项目值- 项目值\*  flex-shrink /N \* N

结论：

（1）项目默认会被缩小（空间不够） flex-shrink：1

（2）Flex-shrink越大，被压缩的越多；

（3）Flex-shrink越小，被压缩的越小。特别的，当flex-shrink:0时，不会被压缩。

4、flex-basis

表示在主轴上占据的大小。

默认值为auto（主轴时水平方向时为宽度width，垂直方向时为高度height

（对于值而言，既可以是像素px，也可以是百分比，相对于容器container大小而言。）

5、flex弹性的

（1）该属性时flex-grow、flex-shrink、flex-basis的缩写

（2）默认值为：0 1 auto  （后两个属性为可选）

（3）该属性有两个快捷键：auto（1 1 auto）、 none（0 0 auto）

6、align-self

取值：auto、flex-start、flex-end、center、baseline、stratch

功能：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-item属性。

Flex布局的总结：

Flex为display的一个属性值，

它约定了一套设置项目的大小、排列、排序的规则。

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 react native基础—4.flex-container和flex-item

1.flex-container（容器的属性） > * 在css中flex布局默认是row（从左向右），在reactnative中是column（从上往下）以...

- 日理万妓/ 2024年04月20日 08:14/ 0 赞/ 65 阅读

相关 CSS3 弹性盒子(flex、flex-direction属性、flex-wrap属性、align-items属性、align-content属性)详解

文章目录 flex flex-direction 属性 flex-wrap 属性 align-items 属性 align-content

我不是女神ヾ/ 2024年03月30日 14:49/ 0 赞/ 66 阅读

相关微信小程序样式Flex Box精通课程-Flex项目的属性-flex-basis项目占据的主轴空间

flex-basis项目占据的主轴空间微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/

缺乏、安全感/ 2024年02月19日 15:40/ 0 赞/ 57 阅读

相关微信小程序样式Flex Box精通课程-Flex项目的属性-flex-shrink项目的缩小比例

flex-shrink项目的缩小比例微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/h

不念不忘少年蓝@/ 2024年02月19日 15:40/ 0 赞/ 20 阅读

相关什么是Flex容器和Flex项目（Flex Container and Flex Item）？它们之间有什么关系？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ Flex容器和Flex项目 ⭐ Flex容器 ⭐ Flex项目 ⭐ 关系 ⭐ 写在最后

我会带着你远行/ 2023年10月15日 14:26/ 0 赞/ 51 阅读

相关 flex align-item与align-content

`align-items`属性定义项目在交叉轴上如何对齐。 `align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。转载于:ht

短命女/ 2023年08月17日 16:39/ 0 赞/ 276 阅读

相关 flex布局的属性

当父元素用flex布局时，它的子元素可以用flex-grow、flex-shrink、flex-basis属性设置，父元素在不同宽度下，子元素是如何分配父元素空间的 flex

左手的ㄟ右手/ 2022年10月11日 10:55/ 0 赞/ 192 阅读

相关 HTML中布局flex的标签,CSS3---Flex布局--项目属性

前言今天学习了项目的属性；【内容】项目属性： ①沿主轴方向上的排列顺序order: 0(默认值) | ②项目的收缩因子flex-shrink: 1(默认值) |

末蓝、/ 2022年10月10日 11:20/ 0 赞/ 283 阅读

相关 Flex入门基础——项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）

1、order 取值：数值功能：（1）容器中有多个项目，（2）项目的默认摆放时沿主轴（纵向）方向，即按文档中dom元素的书写顺序进行排列的；应用：or

比眉伴天荒/ 2022年07月15日 09:55/ 0 赞/ 268 阅读

相关 Flex入门基础——Flex布局、容器container的属性

1、作用：利用Flex可实现完美居中效果；例（1）——display:flex; （注意：无论父元素以何种比例递增，元素依旧保持水平居中） .contain

骑猪看日落/ 2022年07月15日 09:47/ 0 赞/ 314 阅读