这篇就要讲到flex可以使用在内容物(item)上的方法以及功能了!!
order
这个语法是用来指定flex内item的排列顺序,预设值为0,由1开始做顺序排列。
比如说:
.item1 {
order: 4;
}
.item2 {
order: 2;
}
.item3 {
order: 3
}
.item4 {
order: 1
}
此时的排列方式就是
item4 item2 item3 item1
## flex-grow
这个语法可以用来设定item的比例,区块一开始的预设值会是以区块内容元素的宽度,除了写width以外,也可以使用flex-grow将内容物做比例设定。
数值0为预设值,也就是item内元素的宽度是多少就跟着是多少,不会改变。
比如说以下图片外框 container设定为 400px * 100px,数值使用1
但是如果把这个语法加入之後,并且调整比例
.item1 {
flex-grow:2
}
.item2 {
flex-grow:1
}
.item3 {
flex-grow:1
}
.item4 {
flex-grow:1
}
此时第一个item的尺寸会是其他item的两倍,因为上方的程序码指定给item1的数值为2,用个简单的数学方式来理解,比如说外框 container设定为 1000px * 100px,以上方的语法分配後,item1的像素会变成400px,item2~4的像素为200px。
flex-shrink
这个方法跟flex-grow是相反值,也就是数值越大,被压缩的幅度就越大,数值0为预设值,同样的不会被压缩到。
flex-basis
这个属性可以自己设定item的宽高,设定好後会依照container外框范围去比例分配宽度
比如说
flex
这个属性则是把上面三种方法结合起来写在一起,预设值为 flex: 0 1 auto
flex: (flex-grow) (flex-shrink) (flex-basis)
<<: day6_Windows,Linux, MacOs 的虚拟化方案
>>: Day6-TypeScript(TS)基础型别资料Part 1
昨天介绍了开始撰写测试之前必须要知道的二三事之後,想必大家已经对如何开始撰写测试有了一些概念,但测...
或许你想问我 狗狗币有突出的技术吗? 它不是只是照抄程序码而诞生的加密货币吗? 事实并非如此, 我认...
有时候,需要 CRUD 以外的行为,後端有时会开专属的 API,有时候不会。 有时候在使用 API ...
Knative v0.20.0 requires a Kubernetes cluster v1.1...
今天是铁人赛的第一天,这是我第一次参赛,之前听了很多同学说这是个需要有毅力的比赛,我相信我一定能够撑...