css align-self属性怎么用(2)-木庄网络博客

当前第2页返回上一页

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <style>
            .flex-container {
                padding: 0;
                margin: 0;
                list-style: none;
                height: 200px;
                display: flex;
            }
             
            .flex-start {
                align-self: flex-start;
            }
             
            .flex-end {
                align-self: flex-end;
            }
             
            .center {
                align-self: center;
            }
             
            .baseline {
                align-self: baseline;
            }
             
            .stretch {
                align-self: stretch;
            }
             
            .flex-item {
                background: tomato;
                padding: 5px;
                width: 100px;
                margin: 5px;
                line-height: 100px;
                color: white;
                font-weight: bold;
                font-size: 2em;
                text-align: center;
            }
        </style>
 
    </head>
 
    <body>
        <div class="box">
            <ul class="flex-container">
                <li class="flex-item flex-start">1</li>
                <li class="flex-item flex-end">2</li>
                <li class="flex-item center">3</li>
                <li class="flex-item baseline">4</li>
                <li class="flex-item stretch">5</li>
            </ul>
        </div>
    </body>
 
</html>