Day6:进入新手村前先让我复习一下QQ-CSS-flexbox-用在内容物(item)的属性

这篇就要讲到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

Angular 深入浅出三十天:表单与测试 Day05 - 如何写出优秀的测试?

昨天介绍了开始撰写测试之前必须要知道的二三事之後,想必大家已经对如何开始撰写测试有了一些概念,但测...

狗狗币的技术与理想的深入解析

或许你想问我 狗狗币有突出的技术吗? 它不是只是照抄程序码而诞生的加密货币吗? 事实并非如此, 我认...

actions 就是 Vuex 里「共用的 method」

有时候,需要 CRUD 以外的行为,後端有时会开专属的 API,有时候不会。 有时候在使用 API ...

Day 19 Knative Serving DNS 测试

Knative v0.20.0 requires a Kubernetes cluster v1.1...

全端入门Day01_前言

今天是铁人赛的第一天,这是我第一次参赛,之前听了很多同学说这是个需要有毅力的比赛,我相信我一定能够撑...