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

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

結(jié)合右側(cè)編輯器中的布局以及下面的樣式設(shè)置進(jìn)行理解：

flex-start：默認(rèn)值，左對齊

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

實(shí)現(xiàn)效果：

flex-end：交叉軸的終點(diǎn)對齊

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

實(shí)現(xiàn)效果：

center： 交叉軸的中點(diǎn)對齊

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

實(shí)現(xiàn)效果：

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

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

三個盒子中設(shè)置不同的字體大小，可以參考右側(cè)編輯器中的代碼進(jìn)行測試。

實(shí)現(xiàn)效果：

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

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

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

實(shí)現(xiàn)效果：