2022 铁人赛｜Day7 【CSS】排版宠儿 Flexbox - 上篇

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

背景脉络

Day 6 介绍了经典的三大 display，接者就来整理排版宠儿 flexbox 系统的笔记！

---

主题笔记

一、首先要釐清 flexbox 系统下的两种元素

✅ Flex container：
被设定display: flex的父元素，它里面包裹着的第一层子元素就是 Flex items

✅ Flex items：
被父元素 Flex container 包裹着的子元素，我们可以透过 flex 专属的 properties 来安排 items 的排列方式

二、放在 Flex container 的 properties

在选定的 Flex container 放入display: flex后，就可以开始对所有的 Flex items 进行排列

（以下介绍 properties 的值，第一个都为预设值）
（图片部分，container 有设定 padding）

flex-direciton

决定排列 items 的主轴是水平方向，还是垂直方向 （决定后，另一个方向即为交叉轴）

row 由左而右的水平方向为主轴row-reverse 与 row 相反，由右而左的水平方向为主轴column 由上而下的垂直方向为主轴column-reverse 与 column 相反，由下而上的垂直方向为主轴

flex-wrap

决定 items 一行塞不下时，要不要换行，还是就彼此缩小塞在同一行

nowrap 彼此缩小塞在同一行wrap 一行塞不下时，换行wrap-reverse 一行塞不下时，换行时往反方向换行

flex-flow

把 flex-direciton、flex-wrap 写在一起的精简写法！

flex-flow: row wrap;

justify-content

决定 items 如何在主轴上排列

flex-start items 集中于主轴的 startcenter items 集中于主轴的中间flex-end items 集中于主轴的 endspace-between 主轴的 start end 不会有空间，剩下的空间平均分配space-around 每个 items 的左右(row时)/上下(column时)会有相等的空间
（换个说法：主轴的 start end 会有空间（比例为1），剩下的空间平均分配（比例为2））space-evenly 主轴的 start end 会有空间，且与中间的空间平均分配

⬆️ 图片取自于ALPHA Camp课程讲义

.

align-items

决定 items 在交叉轴上的排列

stretch 延展开来，除了已经设定 width or height 的 item（下列示意图 2 号有设定 height）flex-start 集中于该行之顶端center 集中于该行之中间flex-end 集中于该行之尾端baseline 先把内容对齐 baseline，整体 item 随着跑（通常文字下缘对齐的地方称为 baseline）

align-content

决定因 wrap 而产生两行以上的 items，「行与行之间」的排列呈现
（个人感觉就是交叉轴版的justify-content，直接上图感受一下）

stretch、flex-start、center、flex-end、space-between、space-around、space-evenly

.
.
.
下篇会介绍「放在 Flex items 的 properties」！

---

疑惑

在实作 align-items: stretch 时，当我调整 2 号的高，只有在内容高度以内的调整才不会影响到其他 items，如果超过内容高度，其他 items 也会有所变动。(还在研究这之间的关係比例?）

---

参考资料

。 ALPHA Camp课程讲义
。 W3School Flexbox
。 超推荐练习 flexbox 的好网站 ➡️ FLEXBOX FROGGY

---

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