| 屬性 | 說明 |
|---|---|
justify-self |
設定項目在容器內的水平對齊方式。 |
align-self |
設定項目在容器內的垂直對齊方式。 |
place-self |
控制該項目的水平/垂直對齊方式，justify-self + align-self 的簡寫 |
*-self 屬性 align-self 和 justify-self 改為設定在單一網格項目上。
與 Grid 不同的是，justify-self 屬性對 Flexbox 無效，Flexbox只能透過其他方式達到類似效果。
justify-self 屬性justify-self屬性用來控制單一項目（item）在主軸方向上在容器中的對齊方式，在網格佈局中，它會在行內軸（inline axis）上對齊網格區域（grid area）內的項目。
使用上justify-self屬性可以針對單項項目去做設定。
| justify-self 屬性值 | 說明 |
|---|---|
| auto | 使用的值是繼承父元素的 justify-items 屬性值，預設值為 normal。 |
| normal | 在網格佈局中，normal 等同於 stretch；但具有長寬比或固定尺寸的方框則會變成 start。 |
| stretch | 將項目拉伸填滿容器。 |
| center | 項目在區塊中置中對齊。 |
| start | 靠左對齊（依據行內軸開始位置）。 |
| end | 靠右對齊（依據行內軸結束位置） |
align-self 屬性在過去幾天介紹 Flexbox 的 Flex item 的時候有提到align-self屬性，是作用在 Flex item 或 Grid item 上的屬性，
在 Flex 佈局中，用來設定該項目在交叉軸（cross axis）上的對齊方式；
在 Grid 佈局中，交叉軸通常column 軸（主軸為row軸），所以是則是控制單一網格項目 沿著 column 軸（垂直方向）的對齊方式。
align-self 屬性值跟 Flex item 介紹過，功能上大致相似，這次拉出容易搞混的屬性值介紹。
| align-self 屬性值 | 說明 |
|---|---|
| auto | 預設值。繼承父容器的 align-items 設定。 |
| normal | 在網格項目中，normal 等同於 stretch；但具有長寬比或固定尺寸的方框則會變成 start。 |
| stretch | 拉伸項目使其填滿容器在column軸上的空間。（預設行為，前提是未設固定尺寸） |
| center | 將項目在交叉軸上置中對齊。項目太大則向兩邊方向溢出。 |
| baseline | 以彈性項目的文字基線作對齊基準。 |
| align-self 屬性值 | 說明 |
|---|---|
| start | 將項目對齊至交叉軸的起點。是廣義上做法，較相容其他語系。 |
| end | 將項目對齊至交叉軸的終點。是廣義上做法，較相容其他語系。 |
| flex-start | 將彈性項目對齊至交叉軸的起點，交叉軸則根據主軸方向 + 排版上下文。 |
| flex-end | 將彈性項目對齊至交叉軸的終點，交叉軸則根據主軸方向 + 排版上下文。 |
| self-start | 根據自身書寫方向的「起點」對齊 |
| self-end | 根據自身書寫方向的「終點」對齊 |
self-start：
Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis. ----Mdn
使項目在交叉軸方向上，對齊到對齊的容器中與「該項目自己的起始邊」相對應的邊緣。
意思是它不像 start 是根據容器的方向，而是依據元素自己的方向，也可以說是根據該項目自己的**書寫方向（writing direction）**來判斷哪一邊是「起點」。
place-self屬性place-self屬性是 CSS 的一個速寫（shorthand）屬性，為 align-self 和 justify-self 的簡寫。
place-self: <align-self> <justify-self>;
＊如果只寫一個值代表兩個屬性為同一個值。
＊此屬性不支援 Flexbox，因為 justify-self 在 Flexbox 終無效。
Mdn : justify-self
Mdn : align-self
這30天是CSS的 Flexbox 跟 Grid的探索之路，實際上還有很多基礎重要概念礙於篇幅沒有好好介紹，原本目標是自己能實際寫出範例，結果光是理解原理就耗費不少時間，總之30天收穫很多，未來要繼續保持精進的心。
iThome鐵人賽
看影片追技術