CSS3 Flexbox不迷路指南

Flexbox早有耳聞，可是決定切實嘗試一番，仍是由於看了這條圍脖：

我以爲用flexbox能夠實現，可是發覺無從下手，屬性特性都不瞭解。趁此機會，學習下。

英文原版參考資料在這裏：A Complete Guide to Flexbox--CSS tricks

-----------------------------------------------------------------------------------------------------------------------------------------------------------

---->flex container的屬性

---->flex item的屬性

---->練習一：子元素的完美居中問題 

---->練習二：不使用媒體查詢多塊元素根據分辨率自動排列

---->練習三：添加媒體查詢，基本頁面佈局伸縮

上面demo要用現代瀏覽器打開，而且要記得不斷改變瀏覽器窗口的大小，來查看效果。

 

flex container的屬性

 

 

display：

首先，對於container應用下面代碼，針對它的直接子元素建立一個flex的上下文。

.container {
  display: flex; /* or inline-flex */
}

 

 

flex-direction：

它創建一個主軸，用來肯定flex items在flex container中的放置方向。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

**row（default） ：flex item從左向右排列(若是你定義了direction屬性的話，這裏會有影響)；

**row-reverse  : flex item從右向左排列；

**column : 跟row相同，可是是從上向下排列；

**column-reverse  ： 跟row-reverse相同，可是是從下向上排列；

 

 

flex-wrap:

默認的狀況下，flex items會嘗試在一行中顯示，經過制定這個屬性相關的值，你能夠定義是否換行。direction屬性的值 會影響到flex-wrap的值的做用。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

**nowrap：單行，flex item從左向右顯示（direction：ltr）；

**wrap: 多行，flex item從左向右顯示；

**wrap-reverse：多行，flex item顯示方向與direction定義的方向相反。

 

 

flex-flow：

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

這個屬性是flex-direction和flex-wrap屬性的簡寫，默認值是 row nowrap。

 

 

justify-content：

它定義了相對主軸的對齊方式。它定義了水平方向上剩餘空間的分配方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

能夠根據上面的示意圖尋找合適的屬性。

 

 

align-items:

這個屬性定義flex item在十字軸（垂直於主軸）的當前行上的默認行爲。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

 

 

align-content:

這個屬性定義了在垂直方向上剩下的空間的分配方式。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

 

flex item的屬性

 

 

order：

通常狀況下，flex items會按照他們在文檔中的順序來排列。order屬性能夠控制他們在flex container中的顯示順序。

.item {
  order: <integer>;
}

 

 

flex-grow：

給flex items設置flex-grow的數值可讓flex items根據數值比例自適應分配空間。就像上面圖中同樣的。（不要用負值）

.item {
  flex-grow: <number>; /* default 0 */
}

 

 

flex-shrink：

這個屬性定義flex items的伸縮能力。（不要用負值）

.item {
  flex-shrink: <number>; /* default 1 */
}

 

 

flex-basis：

這個屬性定義了在有剩餘的空間可分佈時一個元素的默認大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

 

 

flex：

這個屬性是 flex-grow, flex-shrink和flex-basis的縮寫。默認值是 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

 

 

align-self：

 這個元素與flex items本身的對齊方式有關

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 

瞭解了以後接着跟着練習寫demo（源代碼都放在github上面）：

子元素的完美居中問題 

不使用媒體查詢多塊元素根據分辨率自動排列

添加媒體查詢，基本頁面佈局伸縮

 

總結：

 

雖然它很強大，可是若是須要考慮瀏覽器的兼容性的話，可能就須要另尋它法了。這裏是它的瀏覽器兼容性一覽表：

 

 

 

關於最前面微博那道題目的解法，那個微博下面已經有貼了代碼啦，貼過來看看：

http://ajccom.sinaapp.com/demo/test.html

http://codepen.io/airen/pen/PwoNrQ

上面兩個代碼都值得學習呢。

 

不過我以爲喔，第一個demo就符合要求了啦。

0