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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。