CSS - place-self屬性：初學者指南

你好，未來的CSS大師們！今天，我們將要進入CSS的奇妙世界，並探索一個非常方便的小屬性，叫做place-self。如果你是新手，別擔心；我會一步步地引導你，就像我這些年來對我的學生做的一樣。在這個教學的結束時，你將會像專家一樣放置元素！

CSS - Place Self

place-self是什麼？

在我們跳進深水區之前，讓我們從基礎開始。place-self屬性是一個總結，用於在單一聲明中設定align-self和justify-self屬性。這就像一石二鳥，但更加人道且與CSS相關！

place-self的語法非常簡單：

place-self: <align-self> <justify-self>;

如果你只提供一個值，它將同時應用於align-self和justify-self。這就像點了一份套餐——你花一份錢買到了兩樣東西！

現在，讓我們看看我們可以在place-self中使用哪些不同的值。我會以表格格式呈現它們，我發現這有助於學生更容易消化信息：

值	描述
auto	元素繼承其父容器的align-self/justify-self行為
normal	元素根據文件的正常流定位
start	將元素對齊到容器的開始位置
end	將元素對齊到容器的結束位置
center	將元素在其容器中居中
stretch	擴展元素以填滿容器
flex-start	將元素對齊到flex容器的開始位置
flex-end	將元素對齊到flex容器的結束位置
self-start	將元素對齊到其自身軸的開始位置
self-end	將元素對齊到其自身軸的結束位置
baseline	將元素對齊到容器的基線
first baseline	將元素對齊到容器的第一基線
last baseline	將元素對齊到容器的最後基線

place-self屬性適用於網格項目和flex項目。這就像是一種特殊的超能力，只有某些超級英雄（或者在我們的案例中，元素）才擁有！

現在，讓我們來看看一些例子，以了解這些值在實際中是如何工作的。

.item {
place-self: normal start;
}

這個聲明將元素根據正常流對齊，並在容器的開始位置對正。這就像告訴你的元素，“正常一點，但從開始處著手！”

.item {
place-self: auto center;
}

在這裡，我們說，“從你的父元素繼承對齊，但在水平方向上居中。”這對於讓你的元素在垂直方向上順其自然，但在水平方向上突出來說是完美的。

.item {
place-self: center normal;
}

這將元素垂直居中，但水平方向上保持正常流。想像一下你的元素在一個派對上——它在房間的正中央，但仍然遵循著派對的禮儀！

.item {
place-self: end normal;
}

這將元素垂直對齊到容器的結束位置，並在水平方向上保持正常流。這就像你的元素在人群中踮著腳站在後面！

.item {
place-self: start auto;
}

這將元素垂直定位到容器的開始位置並繼承水平對齊。這就像是說，“我會從頂部開始，但會在水平方向上順其自然。”

.item {
place-self: self-start auto;
}

這將元素垂直對齊到其自身的開始邊緣並繼承水平對齊。這就像你的元素在垂直方向上做自己的事，但在水平方向上隨大流。

.item {
place-self: self-end normal;
}

這將元素垂直對齊到其自身的結束邊緣並在水平方向上保持正常流。這就像你的元素在空中伸手，但腳還是堅定地站在地上！

.item {
place-self: flex-start auto;
}

在flex容器中，這將元素垂直對齊到容器的開始位置並繼承水平對齊。這對於那些想要從頂部開始但順著flex流水平對齊的flex項目來說是完美的。

.item {
place-self: flex-end normal;
}

在flex容器中，這將元素垂直對齊到容器的結束位置並保持水平方向上的正常流。這就像你的flex項目在做倒立！

.item {
place-self: baseline normal;
}

這將元素的基線對齊到容器的基線並在水平方向上保持正常流。這對於保持不同元素之間的文本對齊非常棒。

.item {
place-self: last baseline normal;
}

與基線相似，但如果存在多個基線，則使用最後的基線。這就像確保你的元素有最後一個說話機會！

.item {
place-self: stretch auto;
}

這將元素垂直拉伸以填滿容器並繼承水平對齊。這就像你的元素在說，“我會盡可能地高，但會在水平方向上順其自然。”

而你們，各位！我們已經探索了place-self屬性及其各種值。記住，精通CSS的關鍵在於實踐。所以，去吧，玩轉這些值，混合搭配，看看你能創造出多麼美麗的佈局！

在我多年的教學經驗中，我發現那些實驗並享受CSS的學生往往學習得更快，記憶得更牢。所以不要害怕創造！誰知道呢？你可能會發現一種成為你簽名風格的組合。

快樂編程，願你的元素總是完美對齊！

Credits: Image by storyset