项目在交叉轴上的排列

<!-- 项目在交叉轴上的排列 -->
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

<style>
        .container{
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: flex;
            /* 项目在交叉轴上默认是自动伸缩的 */
            /* y轴上下调整布局 */
            align-items: stretch;
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
        }
        .container > .item{
            width: 60px;
        }
    </style>