這一章節我們來學習align-items屬性，本屬性定義了項目在交叉軸上的對齊方式。屬性值分別為：

align-items: flex-start | flex-end | center | baseline | stretch;

結合右側編輯器中的布局以及下面的樣式設置進行理解：

flex-start：默認值，左對齊

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

實現效果：

flex-end：交叉軸的終點對齊

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

實現效果：

center： 交叉軸的中點對齊

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

實現效果：

baseline：項目的第一行文字的基線對齊。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

三個盒子中設置不同的字體大小，可以參考右側編輯器中的代碼進行測試。

實現效果：

stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

 .box {
        height: 300px;
        background: blue;
        display: flex;
        align-items: stretch;
    }

    .box div {
        /*不設置高度，元素在垂直方向上鋪滿父容器*/
        width: 200px;
    }

實現效果：