2022 铁人赛｜Day8 【CSS】排版宠儿 Flexbox - 下篇

附上为何铁人赛文章会出现在这里的说明：2022 铁人赛｜Day1 报名失败，还是要开赛吧！

背景脉络

接续上篇～～

---

主题笔记

三、放在 Flex items 的 properties

通常用于排列「个别」的 item

order

把排列在一起的 items 想像成一条数线（…-2, -1, 0, 1, 2…），所有 items 一开始 order 的预设值为 0，是照着元素顺序排列，我们可以透过给定其他数字值来帮助他们排列位置。

.

flex-grow

依照设定比例分配「剩余空间」

预设值为0，代表即便有「剩余空间」，得到的分配也为 0

当所有 items 的flex-grow合起来介于 0-1 时，剩余空间将不会被分配完

.

flex-shrink

表示空间不够时 item 的压缩比例

预设值爲 1，表示空间不够时，所有 items 预设都会以 1 的比例压缩若所有 items 的设定数值相同，代表压缩比例相同，可实际压缩大小未必相同，要根据 items 设定的宽度(主轴为row时)做计算。某 item 实际压缩的大小公式为：
container不够的宽 * flex-shrink * 该item宽 / (所有item的宽 * 各自的flex-shrink，相加）

以下举例：

container 宽度 1000px，粉色盒子 300px，绿色盒子 400px，蓝色盒子 500px，不够空间总共爲 200px。粉色 flex-shrink 爲 2，其余 flex-shrink 爲预设值 1。粉色盒子压缩： 200 * 2 * 300(width) / (300 * 2 + 400 * 1 + 500 * 1)(总权重)= 80绿色盒子压缩： 200 * 1 * 400(width) / (300 * 2 + 400 * 1 + 500 * 1)(总权重)= 53.3蓝色盒子压缩： 200 * 1 * 500(width) / (300 * 2 + 400 * 1 + 500 * 1)(总权重)= 66.6粉盒子压缩后爲 220px ；绿盒子压缩后爲 346px ；蓝盒子压缩后爲 433px。

.

flex-basis

决定分配到的实际空间，功能类似 width (主轴为row时)，但优先程度较高，可以覆盖 width

预设值为auto，可填入数字px，也可填入percent％

⚠️ 小小提醒，不要拼错了！第一次使用时，我写成 flex-basic，想说怎么没有效：）

.

flex

把 flex-grow, flex-shrink, flex-basis 写在一起的精简写法！

flex: 0 1 auto /* 预设值 */

.

align-self

决定个别的 item 在交叉轴上的排列，优先程度较高，可以覆盖align-items

预设值为auto，其他可填入的值同align-items

---

参考资料

。 W3School Flexbox
。 Day24 Flex 空间分配 flex-grow / flex-shrink / flex-basis
。 超推荐练习 flexbox 的好网站 ➡️ FLEXBOX FROGGY

---

以上是今天的分享，谢谢看完的你！

---

后记

在这边要跟大家说..
由于最近身体出了点状况，我必须退赛惹（土下座），感觉很不好意思，八天前才向各位递上报名表，信誓旦旦地要发满 30 天。因为是非常临时决定参赛，也没有库存文章接续空窗期（每篇文章都是当天新鲜现打）（果汁？），虽然 2022铁人赛 系列笔记文要告一个段落，但我并不会中断前端学习，也还是会做笔记（只是自己看的就比较随性），有机会就整理上来和大家分享！
.
十分感谢这几天收到的鼓励与交流，这几天把笔记整理起来对该主题也理解的更清晰，有跨出第一步真是太好了！