浅谈 start, flex-start, self-start 在 flexbox 排版上的差异

我在学习 flexbox 时，发现有好多容易混肴的排版属性值，例如:

start, flex-start, self-start

在 Chrome 的 DevTools 上面测试样式时，常常可以在自动完成的选单看到这些属性值。
每次看到却没有彻底理解，心里总是有种不踏实的感觉，
所以是时候该花点时间釐清一下这些属性值的差异了 !

先讲结论 ! 下面会有範例重複验证这里的描述 : )

start 依照容器横向排版方向决定要从哪里开始排，ltr 是左边开始，rtl 则是右边开始。start 不参考 flex-direction 的设定flex-start 有设定 display: flex 时，依照 direction 与 flex-direction 处理后的方向决定从哪里开始排self-start 参考自己 ( flex item ) 的 direction 属性值决定从哪里开始，而不是容器 ( container ) 的 direction 属性值。

在说明之前，必须要先理解 CSS direction 这个属性的用法。

The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).

根据 MDN 的说明，direction 可以控制文字、表单栏位、横向溢出的方向。依照语言的阅读方向可以设定成 ltr 由左至右或 rtl 由右至左显示。

参考以下 HTML (Haml) 与 CSS，.col 设成 inline-block、长宽都是 100px，.box 宽度设成 250px 刚好让第三个正方形溢出换行。

.box  .col    first  .col    second  .col    third

* {  box-sizing: border-box;}body {  padding: 1rem;}.box {  width: 250px;  height: 200px;  outline: 1px solid red;  font-size: 1.2rem;}.col {  display: inline-block;  width: 100px;  height: 100px;  padding: .5rem 1rem;  border: 1px solid #555;}.col:nth-child(1) {  background: #e57373;}.col:nth-child(2) {  background: #fff59d;}.col:nth-child(3) {  background: #daf7a6;}

因为 direction 不设定时，预设是 ltr，所以 .col 排序与溢出的方向都是由左至右，第三个正方形从第二行的左边开始排。

.box direction 设定为 rtl 时，则反过来。

从这里可以看出，在还没有套用 flexbox 前，容器就有它自己的横向排版方向。

在 .box 加上一些 flexbox 相关的属性:

.box {  display: flex;  direction: rtl;  flex-direction: row-reverse;  justify-content: flex-start;  // 以下省略}

flex-start

如下图，当 direction 与 flex-direction 同时设定时，direction: rtl 会先将正方形由右至左排，flex-direction: row-reverse 再把顺序颠倒回来，正方形虽然经过两次反向变回原来的方向，但文字还是因为 direction 设定 rtl 的关係向右靠了。justify-content: flex-start 会依照 direction 与 flex-direction 处理后的方向显示。

start

把 justify-content 改成 start 时，排版则 忽略 flex-direction 的设定呈现。
所以下面只有 direction: rtl 的效果。

self-end

.box 改成以下设定

.box {  display: flex;  direction: rtl;  flex-direction: column;  align-items: flex-end;  // 以下省略}

如上图，因为 direction: rtl 的关係，正方形先往右靠，加上 flex-direction: column 与 align-items: flex-end 的效果，所以正方形又跑到左边。

把第二个正方型加上与容器不一样的 direction 设定

.col:nth-child(2) {  direction: ltr;  align-self: self-end;  // 以下省略}

可以看到 ltr 是从左至右，左边是开始、右边是结束。指定 self-end 就让正方形跑到右边去了。

建议读者可以参考本文的说明动手写一下 CSS，对于这部分的理解会比较印象深刻 : )

参考连结

https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/
https://developer.mozilla.org/en-US/docs/Web/CSS/direction
https://drafts.csswg.org/css-align-3/#positional-values