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

今天学习了项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）

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>

2、flex-grow

取值：数值

功能：放大因子

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

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

使用方法：如上述代码示例中，若设置第一个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）项目默认会被缩小（空间不够） 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——项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）相关推荐

Web:移动商城首页的页眉和页脚的布局和flex项目三个属性
移动商城首页的页眉和页脚的布局先来演示一下flex项目三个属性 1.项目的缩放比例与基准宽度元素属性含义 flex 0 1 auto / initial 默认的,禁止放大,允许收缩,宽度自动 ...
Flex入门基础——项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）
1.order 取值:数值功能:(1)容器中有多个项目, (2)项目的默认摆放时沿主轴(纵向)方向,即按文档中dom元素的书写顺序进行排列的: 应用:order属性用于更改在主轴方向上排列顺序. o ...
flex的三个属性grow、shrink、basis
个人理解 flex-grow:0; 默认值为0,容器中项目没有占满时,不分配剩余空间. flex-shrink:1; 默认值为1,容器中项目超出容器大小时,把项目平均压缩到容器内. flex-basi ...
CSS3 flexbox 布局 ---- flex项目属性介绍
CSS3 flexbox 布局 ---- flex项目属性介绍现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设d ...
Flex布局、flex容器和flex项目
1. Flex布局基础知识 ⑴ Flex弹性布局.任何一个HTML元素都可以指定为flex布局. Display:inline-flex; flex容器是内联块元素 Display:flex:flex ...
flex布局具体的属性字段和属性值
刚刚参加了一次秋招的笔试,其中有一道题目就是要我写出flex的字段和属性值以及他们的作用.这个问题反映了我最近积累知识之后消化不良!!请大家万分注意消化的问题. 具体的flex布局的知识我就不班门弄斧 ...
Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...
转：Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...
flex的12个属性
容器(父元素)的属性: flex-direction属性决定主轴的方向 flex-wrap 属性决定项目在一行排不下的情况下是否换行 flex-flow flex-flow属性是flex-direct ...

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

今天学习了项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）

Flex——项目item的属性（order、flex-grow、flex-shrink、flex-basis、flex、align-self）相关推荐

最新文章

热门文章