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

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

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

而當(dāng)flex-direction:column時(shí)，主軸與交叉軸的關(guān)系如下圖所示：

例：

    
        
    
    
        
  
            
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;
}

可以看到，我們有一個(gè)高600px，寬600px的容器。并為該容器設(shè)置了display:flex;，還通過(guò)flex-direction:row;規(guī)定其中item的排布方向?yàn)闄M向排列。
我們只為其中的item設(shè)置了背景色和一個(gè)2px的右邊距。
效果如圖：

可以看到，當(dāng)沒(méi)有設(shè)置item的高、寬屬性時(shí)，item在容器中默認(rèn)是拉伸填滿容器的。
現(xiàn)在，我們?yōu)閕tem設(shè)置高、寬屬性：

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

效果如下圖：

可以看到，拉伸效果消失了。
而且，所有的item都自動(dòng)左對(duì)齊了。那么如果我們想讓item都右對(duì)齊，應(yīng)該怎么做呢？
這個(gè)時(shí)候justify-content屬性就派上用場(chǎng)了。
justify-content屬性，簡(jiǎn)單說(shuō)來(lái)，就是控制item在主軸上的對(duì)齊方式。
其可取的值有：
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

各個(gè)屬性值所對(duì)應(yīng)的效果如下：
flex-start（默認(rèn)效果）

.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屬性值讓各個(gè)item兩邊不留邊距，而平均分配item之間的空間。P.S:圖中最右側(cè)的2px的邊距是之前設(shè)置的item的右邊距。
space-around

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

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

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

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

從上面的例子可以看出，當(dāng)我們的item橫向排布時(shí)，justify-content是控制著橫方向上的元素對(duì)齊方式。
那如果我們希望控制豎方向上item的排列方式應(yīng)該怎樣做能？
這時(shí)候就需要用到align-item屬性了。
為了便于理解，這次我們只用一個(gè)容器和一個(gè)item，并且不設(shè)置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;
}

效果如下圖：

可以看到，在交叉軸（這種情況下也就是我們常說(shuō)的縱軸）上，item默認(rèn)的排布也是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（默認(rèn)值）

.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
同理，由于已經(jīng)設(shè)置了item的寬和高，所以stretch不會(huì)產(chǎn)生拉伸效果。

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

base-line
為了表現(xiàn)基線對(duì)齊，我們用到了三個(gè)item，效果如圖：

這三個(gè)item等寬，高度分別為60px,80px,100px。而且都通過(guò)
讓文字向下?lián)Q了一行。他們?cè)诮徊孑S上仍然是基線對(duì)齊的。這里的baseline默認(rèn)是指首行文字的基線。

這就好像平面直角坐標(biāo)系用橫坐標(biāo)和縱坐標(biāo)定位一個(gè)點(diǎn)一樣，我們可以同時(shí)使用這兩個(gè)屬性來(lái)定位一個(gè)item在容器中的位置。
比如，我們想讓一個(gè)item定位到容器的中間。
就可以這樣寫(xiě)：

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

可以看到，這里我們通過(guò)justify-content:space-between令這三個(gè)item之間的空間相等。又通過(guò)aling-items:center令他們?cè)诮徊孑S方向上處于中間。

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

就可以這樣設(shè)置我們的css樣式：

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

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

簡(jiǎn)單起見(jiàn)，我們可以直接將start理解為坐標(biāo)系原點(diǎn)所在的方位，而end則是坐標(biāo)軸的箭頭所指向的無(wú)限遠(yuǎn)的方向。
需要指出的是，對(duì)于從左往右的書(shū)寫(xiě)模式，比如漢語(yǔ)、英語(yǔ)等，start可以理解為left，end可以理解為right，而對(duì)于從右往左的書(shū)寫(xiě)模式，比如阿拉伯語(yǔ)，則有，start可以理解為right，end可以理解為left。

當(dāng)我們?yōu)橐粋€(gè)box容器設(shè)置了align-items和 justify-content屬性之后，這套約束的規(guī)則將對(duì)其中的所有item都適用。
可是如果我們不希望某一個(gè)item被這套規(guī)則約束怎么辦呢？
這時(shí)候align-self就派上用場(chǎng)了。
align-self屬性可以取align-items屬性的所有值。
比如，在上面的例子中，如果我們把3 號(hào)item的align-self值設(shè)置為：align-self:flex-end;，則有：

這就相當(dāng)于3號(hào)item宣告天下，它不接受通過(guò)align-items設(shè)置的規(guī)則，而是要設(shè)置自己的規(guī)則，這也是為什么align-self可以取的值和align-items一模一樣。

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

align-content要發(fā)揮作用，需要容器的高度比各行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
比如，當(dāng)align-content取flex-end時(shí)，有：

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