摘要：圖中最右側的的邊距是之前設置的的右邊距。屬性可以取的值如下比如，當取時，有這些屬性值與之前提到的功能一致，不再贅述。

為了控制“對齊”，會用到以下屬性：
justify-content——控制主軸(main axis)上所有item的對齊；
align-items——控制交叉軸(cross axis)上所有item的對齊；
align-self——控制交叉軸(cross axis)上某一特定item的對齊；
align-content——當項目的數量多到占據多行時，控制交叉軸(cross axis)上每行之間空間的分布情況；

主軸與交叉軸就相當于一個二維坐標系的橫軸和縱軸。
當在容器的css參數中，設置display:flex;后，該容器即成為一個flex box。
這時，我們可以通過設置flex-direction:row;或者flex-direction:column;來控制容器中的item的排布方向。
row代表橫向排布，column代表縱向排布。
另外還可以取的值是：row-reverse與column-reverse，他們相對于row和column只是換了個方向而已。
值得注意的是，主軸與交叉軸的方向會根據flex-direction值的不同而變化。
當flex-direction:row時，主軸和交叉軸的關系如下圖所示：

而當flex-direction:column時，主軸與交叉軸的關系如下圖所示：

例：

    
        
    
    
        
  
            
one
            
two
            
three
            
four
            
five
      
        

css文件：

html, body {
    margin: 0;
    padding: 0;
}

.container{
    height: 600px;
    width: 600px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    border: 1px dotted black;
    flex-direction: row;
}

.item{
    background-color: #666;
    margin-right: 2px;
}

可以看到，我們有一個高600px，寬600px的容器。并為該容器設置了display:flex;，還通過flex-direction:row;規定其中item的排布方向為橫向排列。
我們只為其中的item設置了背景色和一個2px的右邊距。
效果如圖：

可以看到，當沒有設置item的高、寬屬性時，item在容器中默認是拉伸填滿容器的。
現在，我們為item設置高、寬屬性：

.item{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin-right: 2px;
}

效果如下圖：

可以看到，拉伸效果消失了。
而且，所有的item都自動左對齊了。那么如果我們想讓item都右對齊，應該怎么做呢？
這個時候justify-content屬性就派上用場了。
justify-content屬性，簡單說來，就是控制item在主軸上的對齊方式。
其可取的值有：
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: stretch
justify-content: space-evenly

各個屬性值所對應的效果如下：
flex-start（默認效果）

.container{
    height: 600px;
    width: 600px;
    justify-content: flex-start;
    ...
}

flex-end

.container{
    height: 600px;
    width: 600px;
    justify-content: flex-end;
    ...
}

center

.container{
    height: 600px;
    width: 600px;
    justify-content: center;
    ...
}

space-between

.container{
    height: 600px;
    width: 600px;
    justify-content: space-between;
    ...
}

space-between屬性值讓各個item兩邊不留邊距，而平均分配item之間的空間。P.S:圖中最右側的2px的邊距是之前設置的item的右邊距。
space-around

.container{
    height: 600px;
    width: 600px;
    justify-content: space-around;
    ...
}

可以看到，正如around所暗示的，和space-between不同，這次左右兩邊都有分配空間。而且是子容器沿主軸均勻分布，位于首尾兩端的子容器到父容器的距離是子容器間距的一半。
stretch
由于設置了item的寬和高，所以stretch不會生效。
space-evenly

.container{
    height: 600px;
    width: 600px;
    justify-content: space-evenly;
    ...
}

space-evenly指的是空間的平均分配。

從上面的例子可以看出，當我們的item橫向排布時，justify-content是控制著橫方向上的元素對齊方式。
那如果我們希望控制豎方向上item的排列方式應該怎樣做能？
這時候就需要用到align-item屬性了。
為了便于理解，這次我們只用一個容器和一個item，并且不設置justify-content。

html文件：

    
        
    
    
        
  
            
one
        

css樣式

html, body {
    margin: 0;
    padding: 0;
}

.container{
    height: 600px;
    width: 100px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    border: 1px dotted black;
    flex-direction: row;
}

.item{
    height: 50px;
    width: 50px;
    background-color: #666;
}

效果如下圖：

可以看到，在交叉軸（這種情況下也就是我們常說的縱軸）上，item默認的排布也是flex-start。
而align-items可以取的值也和justify-content類似：
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline

flex-start（默認值）

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    ...
}

效果如上圖所示。
flex-end

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    ...
}

flex-center

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    ...
}

stretch
同理，由于已經設置了item的寬和高，所以stretch不會產生拉伸效果。

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    ...
}

base-line
為了表現基線對齊，我們用到了三個item，效果如圖：

這三個item等寬，高度分別為60px,80px,100px。而且都通過
讓文字向下換了一行。他們在交叉軸上仍然是基線對齊的。這里的baseline默認是指首行文字的基線。

這就好像平面直角坐標系用橫坐標和縱坐標定位一個點一樣，我們可以同時使用這兩個屬性來定位一個item在容器中的位置。
比如，我們想讓一個item定位到容器的中間。
就可以這樣寫：

又比如，想要讓三個item在box的中軸線上分布，而且它們之間的空間相等：

可以看到，這里我們通過justify-content:space-between令這三個item之間的空間相等。又通過aling-items:center令他們在交叉軸方向上處于中間。

此時item排布的原理與flex-direction:row時是一致的。
只不過這次主軸換到了豎直方向，而交叉軸換到了水平方向。
根據上面我們講到的原理，我們不妨試舉一例。
比如，有豎直排布的三個item，我們希望它們可以實現如下圖所示的設計：

就可以這樣設置我們的css樣式：

.box {
  height:300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

通過justify-content: flex-end我們實現了讓這三個item排布到主軸（這種情況下是豎直方向這個軸）的尾端(end)；
再通過align-items: center我們實現了讓這三個item排布到交叉軸（這種情況下是橫向的這個軸）的中間。
綜合起來，就形成了這樣一個布局。

簡單起見，我們可以直接將start理解為坐標系原點所在的方位，而end則是坐標軸的箭頭所指向的無限遠的方向。
需要指出的是，對于從左往右的書寫模式，比如漢語、英語等，start可以理解為left，end可以理解為right，而對于從右往左的書寫模式，比如阿拉伯語，則有，start可以理解為right，end可以理解為left。

當我們為一個box容器設置了align-items和 justify-content屬性之后，這套約束的規則將對其中的所有item都適用。
可是如果我們不希望某一個item被這套規則約束怎么辦呢？
這時候align-self就派上用場了。
align-self屬性可以取align-items屬性的所有值。
比如，在上面的例子中，如果我們把3 號item的align-self值設置為：align-self:flex-end;，則有：

這就相當于3號item宣告天下，它不接受通過align-items設置的規則，而是要設置自己的規則，這也是為什么align-self可以取的值和align-items一模一樣。

到目前為止，我們討論了在flex容器內單個或多個容器的排布問題。如果我們有一個flex容器，并且其中的item占據了多行，這時候我們可以用到align-content屬性，來控制行與行之間的空間分布。

align-content要發揮作用，需要容器的高度比各行item的總高度之和要高。

align-content屬性可以取的值如下：
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly
比如，當align-content取flex-end時，有：

這些屬性值與之前提到的功能一致，不再贅述。