CSS place-self屬性用法及代碼示例

CSS place-self屬性是align-self和justify-self屬性的簡寫。 CSS中的簡寫屬性意味著您可以在單個屬性中設置多個屬性值。在此，place-self屬性可以保存align-self和justify-self屬性的值。

用法:

place-self:align-self-property-value justify-self-property-value

屬性值：該屬性接受align-items和justify-items屬性值可以產生的所有可能的組合值。

auto:如果項目沒有父項，則使用此屬性。然後，此屬性用於定義項目的絕對位置。
normal:此屬性取決於當前的布局模式。
start:此屬性用於從容器的開頭對齊彈性項目。
end:此屬性用於從容器的末端對齊彈性項目。
flex-start:此屬性用於在flex容器的開始處顯示行。
flex-end:此屬性用於在flex容器的末尾顯示柔性線。
center:此屬性用於將彈性項目與容器的中心對齊。
self-start:此屬性用於將與項目齊平的項目包裝到對齊容器中。
self-end:此屬性用於將與項目齊平的項目包裝到對齊容器中。
space-evenly:此屬性定義位置，它們之間具有相等的間距，但距角的間距不同。
stretch:此屬性定義拉伸的線以占用flex容器的剩餘空間。它是默認值。

以下示例說明了CSS place-self屬性：

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS place-self Property</title> 
    <style> 
        h1 { 
            color:green; 
        } 
  
        article { 
            background-color:black; 
            display:grid; 
            grid-auto-rows:40px; 
            grid-gap:5px; 
            width:200px; 
        } 
  
        /* Using different values 
    with the place-self property */ 
        span:nth-child(2) { 
            place-self:start center; 
        } 
  
        span:nth-child(3) { 
            place-self:center start; 
        } 
  
        article span { 
            background-color:orange; 
            color:white; 
            margin:1px; 
            text-align:center; 
        } 
  
        article, 
        span { 
            padding:6px; 
            border-radius:5px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <b>CSS place-self Property</b> 
        <article class="container"> 
            <span>HTML</span> 
            <span>CSS</span> 
            <span>Bootstrap</span> 
            <span>JavaScript</span> 
        </article> 
    </center> 
</body> 
  
</html>

輸出：
place-self-ex1

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS place-self Property</title> 
    <style> 
        h1 { 
            color:green; 
        } 
  
        article { 
            background-color:black; 
            display:grid; 
            grid-auto-rows:40px; 
            grid-gap:5px; 
            width:200px; 
        } 
  
        /* Using different values 
        with the place-self property */ 
        span:nth-child(2) { 
            place-self:self-start; 
        } 
  
        span:nth-child(3) { 
            place-self:self-end; 
        } 
  
        article span { 
            background-color:orange; 
            color:white; 
            margin:1px; 
            text-align:center; 
        } 
  
        article, 
        span { 
            padding:6px; 
            border-radius:5px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <b>CSS place-self Property</b> 
        <article class="container"> 
            <span>HTML</span> 
            <span>CSS</span> 
            <span>Bootstrap</span> 
            <span>JavaScript</span> 
        </article> 
    </center> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自skyridetim大神的英文原創作品 CSS place-self Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。