三分鐘學會css3中的flexbox布局

這篇文章里我們將學習CSS里flexbox布局的幾個最重要的概念，通過學習flexbox布局，你會發現以往遇到的所有的關于布局的問題，現在都可以輕松解決了。

我們將只關注幾個核心概念，等這些核心知識掌握之后，你可以再慢慢的學習那些不重要的相關知識。

1. 容器和容器里的元素

flexbox布局的兩個最重要的概念是 容器 (藍色)和容器里的 子元素 (紅色)。在本文的例子中， 容器 和它的 子元素 都是 div 。

橫向布局

為了實現flex布局，我們需要在 容器 的CSS里添加如下代碼：

.container {
    display: flex;
}

效果如下：

對于容器里面的子元素，我們什么都不需要做。它們會自動的按橫坐標一字排開。

縱向布局

在上面的演示中，缺省排列是沿著橫坐標方向的，還有一個方向是縱坐標，這個坐標軸的概念在理解flex布局中非常重要。

當我們在 容器 的CSS里添加 flex-direction : column. 后， 子元素 的排列方向就會發生變化。

.container {
    display: flex;
    flex-direction: column;
}

現在，子元素的排列方向是沿著縱坐標的方向了。

2. 調整子元素的對齊方式

現在我們讓子元素重新橫向布局，這需要將 flex-direction 屬性的值從 column 改成 row, 子元素就會重新回到橫向布局。

調整子元素的對齊方式，我需要使用 justify-content 和 align-items 這兩個屬性，它們控制著子元素的在橫向和縱向兩方面的定位和對齊方式。

下面我們將要使用 justify-content 屬性讓所有子元素都居中對齊：

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

使用 align-items 屬性來控制子元素的豎向對齊方式：

.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. 子元素

最后，我們將學習針對 子元素 的一些應對flexbox布局的CSS屬性。

比如我們想調整第一個子元素的位置，我們可以給他添加CSS屬性 align-self ，這個屬性的屬性值是和 align-items 是一樣的用法:

.item1 {
  align-self: flex-end;
}

效果是下面這樣：

是不是很神奇企且簡單！

關于flexbox布局的知識遠比本文介紹的這些要豐富，這總重要的幾個知識點就是這些，掌握了它們，再學些其他的用法就容易多了。

 

來自：http://www.webhek.com/css-flexbox-layout