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

CSS place-items屬性是align-items和justify-items屬性的簡寫。縮寫屬性在CSS中表示可以在單個屬性中設置多個屬性值。因此，這裏place-items屬性可以保存align-items和justify-items屬性值。

用法:

place-items:align-items property value justify-items 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-items屬性：

範例1：在此示例中，我們將使用星號place-items：flex-start屬性值。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS place-items Property</title> 
        <style> 
            h1 { 
                color:green; 
            } 
            #container { 
                display:flex; 
                height:200px; 
                width:460px; 
                flex-wrap:wrap; 
                background-color:gray; 
                /* place-items can be changed in the live sample */ 
                place-items:flex-start; 
            } 
  
            div > div { 
                border:2px solid black; 
                width:60px; 
                background-color:green; 
                color:white; 
            } 
  
            .short { 
                font-size:12px; 
                height:30px; 
            } 
  
            .tall { 
                font-size:14px; 
                height:40px; 
            } 
        </style> 
    </head> 
    <body> 
        <center> 
            <h1>GeeksforGeeks</h1> 
            <b>CSS place-items Property</b> 
            <div id="container"> 
                <div class="short">Geeks</div> 
                <div class="short"> 
                    Computer<br /> 
                    Science 
                </div> 
                <div class="tall"> 
                    Geeks<br /> 
                    for 
                </div> 
                <div class="tall"> 
                    Portal<br /> 
                    for 
                </div> 
                <div class="tall"></div> 
            </div> 
        </center> 
    </body> 
</html>

輸出：

範例2：在這裏，我們將使用place-items：flex-end屬性值。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS place-content Property</title> 
        <style> 
            h1 { 
                color:green; 
            } 
            #container { 
                display:flex; 
                height:200px; 
                width:460px; 
                flex-wrap:wrap; 
                background-color:gray; 
                /* place-items can be changed in the live sample */ 
                place-items:flex-end; 
            } 
  
            div > div { 
                border:2px solid black; 
                width:60px; 
                background-color:green; 
                color:white; 
            } 
  
            .short { 
                font-size:12px; 
                height:30px; 
            } 
  
            .tall { 
                font-size:14px; 
                height:40px; 
            } 
        </style> 
    </head> 
    <body> 
        <center> 
            <h1>GeeksforGeeks</h1> 
            <b>CSS place-items Property</b> 
            <div id="container"> 
                <div class="short">Geeks</div> 
                <div class="short"> 
                    Computer<br /> 
                    Science 
                </div> 
                <div class="tall"> 
                    Geeks<br /> 
                    for 
                </div> 
                <div class="tall"> 
                    Portal<br /> 
                    for 
                </div> 
                <div class="tall"></div> 
            </div> 
        </center> 
    </body> 
</html>

輸出：

相關用法

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