弹性式布局

弹性式布局就是更方便的控制内容的对齐方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .item {
                background-color: aqua;
                border: #ccc solid 1px;
                padding: 1rem;
                text-align: center;
                margin: 0.75rem;
                width: 100px;
            }
 
            #container {
                display: flex;
                flex-wrap: wrap;
                background-color: #555;
                /* 对齐方式 */
                justify-content: flex-start;
                /* flex-start(默认值) */
                /* flex-end */
                /* center */
                /* space-between */
                /* space-around */
                /* space-evenly */
                height: 600px;
                /* 项目在交叉轴的对齐方式 */
                align-items: baseline;
                /* stretch(默认值) */
                /* flex-start
                    flex-end
                    center
                    baseline
                 */
                align-content: stretch;
                /* 
                 flex-start
                 flex-end
                 center
                 space-between
                 space-around
                 stretch(默认值)
                 */
            }
            .item-2{
                align-self: center;
                /* 
                 auto(默认值)
                 flex-start
                 flex-end
                 center
                 baseline
                 stretch
                 */
                order: 2;
            }
            .item-1{
                order: 3;
            }
            .item-3{
                order: 1;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="item item-1">
                <h3>Item 1</h3>
            </div>
            <div class="item item-2">
                <h3>Item 2</h3>
            </div>
            <div class="item item-3">
                <h3>Item 3</h3>
            </div>
        </div>
    </body>
</html>