align-self（对齐方式）

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>align-self 演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        
        h1 {
            color: #333;
        }
        
        .container {
            display: flex;
            height: 300px;
            background-color: #f0f0f0;
            border: 2px solid #333;
            margin-bottom: 20px;
            align-items: center; /* 默认对齐方式 */
        }
        
        .item {
            width: 80px;
            margin: 5px;
            padding: 10px;
            text-align: center;
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
        }
        
        .auto {
            align-self: auto;
            background-color: #2196F3;
        }
        
        .flex-start {
            align-self: flex-start;
            background-color: #FF9800;
        }
        
        .flex-end {
            align-self: flex-end;
            background-color: #9C27B0;
        }
        
        .center {
            align-self: center;
            background-color: #F44336;
        }
        
        .baseline {
            align-self: baseline;
            background-color: #607D8B;
            padding-top: 30px;
        }
        
        .stretch {
            align-self: stretch;
            background-color: #795548;
        }
        
        .description {
            margin-top: 10px;
            padding: 10px;
            background-color: #e9e9e9;
            border-left: 4px solid #4CAF50;
        }
    </style>
</head>
<body>
    <h1>CSS align-self 属性演示</h1>
    
    <div class="container">
        <div class="item auto">auto</div>
        <div class="item flex-start">flex-start</div>
        <div class="item flex-end">flex-end</div>
        <div class="item center">center</div>
        <div class="item baseline">baseline</div>
        <div class="item stretch">stretch</div>
    </div>
    
    <div class="description">
        <p>这个演示展示了 <code>align-self</code> 的不同值如何影响弹性项目在交叉轴上的对齐方式。</p>
        <p>容器设置了 <code>align-items: center</code> 作为默认对齐方式。</p>
        <ul>
            <li><strong>auto</strong>: 继承父容器的 align-items 值 (center)</li>
            <li><strong>flex-start</strong>: 与交叉轴起点对齐</li>
            <li><strong>flex-end</strong>: 与交叉轴终点对齐</li>
            <li><strong>center</strong>: 在交叉轴居中对齐</li>
            <li><strong>baseline</strong>: 与基线对齐 (注意 padding-top 的影响)</li>
            <li><strong>stretch</strong>: 拉伸填满容器高度</li>
        </ul>
    </div>
</body>
</html>