布局的傳統解決方案，基于盒狀模型，依賴 display屬性 position屬性 float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。

Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有浏覽器的支持，這意味着，現在就能很安全地使用這項功能。

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

一、先看看浏覽器的支持情況：

flex浏覽器支持情況

浏覽器的支持方式，表明了應用場景，現在基本上在移動端應用較多。

二、常見的布局：

常見的布局

三、基本概念：

基本概念

1、采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。

2、容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

四、用法：

1、任何一個容器都可以指定為Flex布局。

.box{ display: flex; }

2、行内元素也可以使用Flex布局。

.box{ display: inline-flex;}

3、必要的浏覽器前綴不可省略。

五、屬性詳解

1、flex-direction屬性（主軸的方向---即項目的排列方向）

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

屬性的含義

具體表現：

具體表現

2、flex-wrap屬性

默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

示例圖

.box{

flex-wrap: nowrap | wrap | wrap-reverse;

}

不換行的排列

wrap換行

wrap-reverse換行

文章太長了，故分為3節，下一篇繼續寫《css3中Flex 布局詳解--- 2》，将把剩下的參數寫完。

不好意思，給你帶來不便，敬請諒解！。

PS：摘抄于《阮一峰的網絡日志》和《A Visual Guide to CSS3 Flexbox Properties

》

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!