學習彈性佈局flexbox

學習 flexbox

學習基礎語法，能夠根據demo裏面的代碼理解每個屬性和值。

CSS3 彈性框(Flexible Box 或 Flexbox)，是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當排布行爲的佈局方式。

相關的術語

彈性容器(Flex container)：

包含着彈性項目的父元素。經過設置 display 屬性的值爲 flex 或 inline-flex 來定義彈性容器。

彈性項目(Flex item)：

彈性容器的每一個子元素都成爲彈性項目。彈性容器直接包含的文本將包覆成匿名彈性項目。

軸(Axis)

每一個彈性框佈局包含兩個軸。彈性項目沿其依次排列的那根軸稱爲主軸(main axis)。垂直於主軸的那根軸稱爲側軸(cross axis)。

容器的屬性

display

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

注意，設爲Flex佈局之後，子元素的 float、 clear和 vertical-align 屬性將失效。

flex-direction

決定主軸的方向（即項目的排列方向）。這裏須要注意的是主軸（main axis）是能夠變更的，不必定就是圖中的x軸。

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

• row（默認值）：主軸爲水平方向，起點在左端。

• row-reverse：主軸爲水平方向，起點在右端。

• column：主軸爲垂直方向，起點在上沿。

• column-reverse：主軸爲垂直方向，起點在下沿。

demo-flex-direction

flex-wrap

flex-wrap屬性定義，若是一條軸線排不下，如何換行。

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

• nowrap（默認）：不換行。

• wrap：換行，第一行在上方。

• wrap-reverse：換行，第一行在下方。

demo-flex-wrap

flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

justify-content屬性定義了項目在主軸上的對齊方式。

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

• flex-start（默認值）：左對齊

• flex-end：右對齊

• center： 居中

• space-between：兩端對齊，項目之間的間隔都相等。

• space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

demo-justify-conten

align-items

align-items屬性定義項目在交叉軸上如何對齊。

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

• flex-start：交叉軸的起點對齊。

• flex-end：交叉軸的終點對齊。

• center：交叉軸的中點對齊。

• baseline: 項目的第一行文字的基線對齊。

• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

demo-align-items

align-content

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

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

• flex-start：與交叉軸的起點對齊。

• flex-end：與交叉軸的終點對齊。

• center：與交叉軸的中點對齊。

• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

• space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。

• stretch（默認值）：軸線佔滿整個交叉軸。

demo-align-content

項目（item）的屬性

order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

.item {
    order: <integer>;
}

demo-order

flex-grow屬性

flex-grow 屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

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

dmeo-grow

flex-shrink屬性

flex-shrink 屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

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

demo-shrink

flex-basis屬性

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

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

demo-basic

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

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

有兩個默認值auto (1 1 auto)，none（0 0 auto）

demo-flex

align-self屬性

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

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

demo-align-self

實踐

sass flexbox 的兼容方案

less flexbox 的兼容方案

demo-case-flex 頂部導航

demo-case-holy-grail 聖盃佈局

資源

A Complete Guide to Flexbox 一份關於 flexbox 的指導。

阮一峯 flexbox 語法

flexbox 使用

移動端全兼容的flexbox速成班 iusx團隊分享的

移動端開發小記 - Flexbox 淘寶前端團隊分享的

flexbox 的一些解決方案

經過遊戲學習 flexbox

flexbox5min 學習flexbox 5分鐘。

flexplorer

less flexbox

框架

inuitcss
Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

spectre
lightweight, responsive and modern CSS framework for faster and extensible development.

彈性佈局，很是靈活已擴展。用更少的代碼寫出複雜的佈局的方式，關於移動端的運用能夠參考上面 騰訊 的 淘寶團隊的文章。

文章同時發表在：
http://blog.qingzhui.net/post...