關於align-items和align-content的區別和使用場景

　　最近在研究flex佈局，容器中有兩個屬性，是用來定義crossAxis測軸排列方式的。一開始接觸align-items還能夠理解感受不難,後來看到align-content就感受有點混淆了，特開一篇博客記錄一下個人學習過程。先來看看兩個屬性的基本用法和定義，這裏摘抄於螢火蟲塔莉上的回答。

align-items

The align-items property applies to all flex containers, and sets the default alignment of the flex items along the cross axis of each flex line.
align-items屬性適用於全部的flex容器，它是用來設置每一個flex元素在側軸上的默認對齊方式。

align-items has the same functionality as align-content but the difference is that it works to center every single-line Container instead of 
centering the whole container.
align-items和align-content有相同的功能，不過不一樣點是它是用來讓每個單行的容器居中而不是讓整個容器居中。

align-content

The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is 
extra space in the cross-axis.
align-content屬性只適用於多行的flex容器，而且當側軸上有多餘空間使flex容器內的flex線對齊。

 看到這裏大概已經明白了概念，align-content是針對flex容器裏面多軸(多行)的狀況,align-items是針對一行的狀況進行排列。下面寫個小demo。

<div id="container">
    <div id="One">1</div>
    <div id="Two">2</div>
</div>

#container{
    width:300px;
    height:200px;
    display: flex;
    border:1px solid #000000;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    /*align-items: flex-start;*/
    align-content: space-between;
}
#One,#Two{
    width:200px;
    height:30px;
    border:1px solid red;
}

　　此時能夠看到item的寬度相加大於container的寬度，容器中flex-wrap屬性值是wrap即會形成換行，換行後就會有多個crossAxis軸,這個時候就須要用到align-content，先看看結果。

能夠看到align-content值生效了,若是是這時候使用align-items會是怎樣的效果呢？

align-items是id="One"的DIV生效，而第二個軸上的div沒有受到影響。

　　反之若是width相加小於container的寬度，那麼就須要用align-items。align-content則不會生效。在不生效的狀況下，兩個屬性都會去默認值stretch。