我所知道的flex佈局 —— 上篇

前言

你還在用display+position+float來進行css佈局嗎？有沒有以爲用傳統的這種佈局方法來實現特殊佈局特別麻煩困難，例如：垂直居中。今天來記錄一下本身對flex佈局的瞭解（雖然不算神馬新東西了均可以說是舊東西了~~~）

歷史

2009年，W3C提出了一種新的方案 —— Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。

flex佈局也經歷了一段演變歷史。當你用google搜索flex時你會發現不少「過期」的資料信息。

• 若是你正在瀏覽一篇關於flexbox的博客時看到display:box或一個屬性爲box-{*}，那麼你正在瀏覽的是2009年版本的flexbox

• 若是你正在瀏覽一篇關於flexbox的博客時看到display:flexbox或一個flex()函數，那麼你正在瀏覽的是2011年版本的flexbox

• 若是你正在瀏覽一篇關於flexbox的博客時看到display:flex和flex-{*}的一系列屬性，那麼你正在瀏覽的是如今版本的flexbox

目前，它已經獲得了全部瀏覽器的支持，網頁端瀏覽器兼容性以下：

移動端瀏覽器兼容性：

概念

Flexbox佈局（ Flexible Box 或CSS3 彈性佈局），是CSS3中的一種新的佈局模式，能夠自動調整子元素的高和寬，來很好的填充任何不一樣屏幕大小的顯示設備中的可用顯示空間，收縮內容防止內容溢出，確保元素擁有恰當的行爲的佈局方式。使用Flexbox來佈局更容易，可使用更少的代碼，更簡單的方式實現更復雜的佈局，例如對齊方式，排列方向，排列順序（這也是Flexbox佈局的核心能力所在），彈性盒中的子元素經過在各個方向放置就能夠以彈性的尺寸適應父元素的顯示區域。因爲子元素的顯示順序和它們在代碼中 的順序是獨立的，經過使用彈性盒，定位子元素變得更加簡單，複雜的佈局也可以使用更清晰的代碼更簡單的實現。獨立顯示被設定成只針對可見元素，而不是基於代碼的聲明和導航順序。

不一樣於塊級元素基於垂直方向佈局以及行內元素基於水平方向佈局，彈性盒佈局的算法是方向無關的。 雖然塊級元素佈局在頁面中工做良好，可是其定義不足以支持那種須要根據用戶代理從豎直切換成水平等變化而進行方向切換、大小調整、拉伸、收縮的引用組件。不一樣於將要出現的網格佈局針對目標爲大比例佈局，彈性盒佈局更適用於應用組件和小比例佈局。這兩種都是CSS工做組爲了能與不一樣用戶代理、不一樣書寫模式和其餘彈性須要進行協做而作出的努力。

常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流。先看一張圖：

1. flex container：flex容器/彈性容器

flex容器是flex元素的父元素。經過設置display屬性的值爲flex或inline-flex定義。
舊版本屬性值：

- box:將對象做爲彈性容器顯示（最老版本-2009）
- inline-box:將對象做爲內聯塊級彈性容器顯示（最老版本-2009）
- flexbox:將對象做爲彈性容器顯示。（過渡版本-2011）
- inline-box: 將對象做爲內聯塊級彈性容器顯示。（過渡版本-2011）

2. flex item：flex子元素或彈性子元素

flex容器的每個子元素均爲一個flex子元素。注意：flex容器直接包含的文本變爲匿名的彈性子元素，同時flexbox佈局和原來的佈局是兩套概念，因此部分css屬性在flex子元素中將不起做用，如：float，clear，vertical-align，column-*等

###3. 軸 axis

每一個flex子元素沿着主軸（main axis）依次相互排列。交叉軸（cross axis）垂直於主軸。

- 屬性flex-direction定義主軸方向
- 屬性justify-content定義flex子元素如何沿着主軸排列
- 屬性align-items定義flex子元素如何沿着交叉軸排列
- 屬性align-self覆蓋父元素的align-items屬性，定義了單獨的flex子元素如何沿着交   叉軸排列

方向 direction

flex容器的主軸起點邊緣（main start）、主軸終點邊緣（main end）和 交叉軸起點邊緣（cross start）,交叉軸終點邊緣（cross end）爲flex子元素排列的起始和結束位置。它們具體取決於由writing-mode（從左到右、從右到左等等）屬性創建的向量中的主軸和交叉軸位置。

- 屬性order將元素依次分組，並決定誰先出現。
- 屬性flex-flow是屬性 flex-direction 和 flex-wrap 的簡寫，用於排列flex子元素。

行

flex子元素根據 flex-wrap 屬性控制的側軸方向（在這個方向上能夠創建垂直的新線），既能夠是一行也能夠是多行排列

尺寸

flex子元素寬高可相應地等價於主尺寸（main size）和交叉尺寸（cross size），它們都分別取決於flex容器的主軸和側軸。

- min-height和 min-width屬性的初始值爲新增關鍵字 auto。
- 屬性flex是flex-basis，flex-grow和flex-shrink的縮寫，表明flex子元素的伸縮性。

鳴謝

Flexbox佈局（CSS3 彈性佈局，Flexible Box）之 基本概念解析

後話

夜深了，早點休息。——（實際上是致本身。）