這篇文章里我們將學(xué)習(xí)CSS里flexbox布局的幾個最重要的概念，通過學(xué)習(xí)flexbox布局辽聊，你會發(fā)現(xiàn)以往遇到的所有的關(guān)于布局的問題解寝，現(xiàn)在都可以輕松解決了已脓。
我們將只關(guān)注幾個核心概念，等這些核心知識掌握之后袜漩，你可以再慢慢的學(xué)習(xí)那些不重要的相關(guān)知識绪爸。
1. 容器和容器里的元素
flexbox布局的兩個最重要的概念是 容器 (藍色)和容器里的 子元素 (紅色)。在本文的例子中宙攻， 容器 和它的 子元素 都是 div 奠货。
橫向布局
為了實現(xiàn)flex布局，我們需要在 容器 的CSS里添加如下代碼：
.container {
display: flex;
}
效果如下：
對于容器里面的子元素座掘，我們什么都不需要做递惋。它們會自動的按橫坐標一字排開。
縱向布局
在上面的演示中溢陪，缺省排列是沿著橫坐標方向的萍虽，還有一個方向是縱坐標，這個坐標軸的概念在理解flex布局中非常重要形真。
當我們在 容器 的CSS里添加 flex-direction : column. 后杉编， 子元素 的排列方向就會發(fā)生變化。
.container {
display: flex;
flex-direction: column;
}
現(xiàn)在咆霜，子元素的排列方向是沿著縱坐標的方向了邓馒。
2. 調(diào)整子元素的對齊方式
現(xiàn)在我們讓子元素重新橫向布局，這需要將 flex-direction 屬性的值從column 改成 row, 子元素就會重新回到橫向布局蛾坯。
調(diào)整子元素的對齊方式绒净，我需要使用 justify-content 和 align-items 這兩個屬性，它們控制著子元素的在橫向和縱向兩方面的定位和對齊方式偿衰。
下面我們將要使用 justify-content 屬性讓所有子元素都居中對齊：
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
使用 align-items 屬性來控制子元素的豎向?qū)R方式：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
下面的列表中顯示了 justify-content 和 align-items 屬性可以使用的屬性值：
justify-content:
flex-start ( default )
flex-end
center
space-between
space-around
align-items:
flex-start (default)
flex-end
center
baseline
stretch
建議大家將 justify-content 挂疆、 align-items 和 flex-direction 幾個屬性混合使用改览，相互配合，看看都會達到什么樣的布局效果缤言。這樣你才能正確的理解flexbox布局的布局方式宝当。
3. 子元素
最后，我們將學(xué)習(xí)針對 子元素 的一些應(yīng)對flexbox布局的CSS屬性胆萧。
比如我們想調(diào)整第一個子元素的位置庆揩，我們可以給他添加CSS屬性 align-self，這個屬性的屬性值是和 align-items 是一樣的用法:
.item1 {
align-self: flex-end;
}
效果是下面這樣：
是不是很神奇企且簡單跌穗！
關(guān)于flexbox布局的知識遠比本文介紹的這些要豐富订晌，這總重要的幾個知識點就是這些，掌握了它們蚌吸，再學(xué)些其他的用法就容易多了锈拨。
