flex是flexible box的簡稱，意為彈性布局，顧名思義，在網頁布局時，他可以給我們提供更多的靈活性。
說明：
1.flex是display的乙個屬性值。與之相當應的還有乙個是inline-flex。
2.設定了flex布局後，子元素的float，clear，還有verticle-align屬性都不起作用。
3. 設定了display:flex屬性的元素，稱為flex容器，他裡面的所有子元素統稱為容器成員，稱為flex專案。後面我們就使用flex容器和 flex專案來進行介紹。 flex容器有兩根座標軸：水平的叫主軸（main axis）和垂直的叫交叉軸（cross axis）。
flex容器有6種屬性可用分別是：
屬性詳細說明
flex-direction
決定主軸的方向（即專案的排列方向）
flex-wrap
控制flex容器是單行顯示還是多行顯示，而交叉軸的方向就決定著新線的排列方向
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫
justify-content
定義了flex專案在主軸方向上的對齊方式
align-items
定義專案在交叉軸上的對齊方式
align-content
定義了多根軸線的對齊方式，如果只有一條軸線，那麼此屬性不起作用
下面就逐一給大家介紹這些屬性有什麼用，以及他們所對應的屬性值又是什麼意思。
flex-direction: row | row-reverse | column | column-reverse;
屬性決定主軸的方向（即專案的排列方向）
名稱（屬性/值）
詳細說明
row（預設值）
主軸為水平方向，起點在左端
row-reverse
主軸為水平方向，起點在右端
column
主軸為垂直方向，起點在上沿
column-reverse
主軸為垂直方向，起點在下沿
效果演示
flex-wrap: nowrap | wrap | wrap-reverse;
屬性可以控制flex容器是單行顯示還是多行顯示，而交叉軸的方向就決定著新線的排列方向
屬性/值
詳細說明
nowrap
不換行wrap
換行wrap-reverse
換行與wrap相似，但行的順序是倒過來的
效果演示
屬性/值
詳細說明
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫，預設值為flex-flow : row nowrap
justify-content: flex-start | flex-end | center | space-between | space-around;
屬性定義了flex專案在主軸方向上的對齊方式
屬性/值
詳細說明
flex-start
類似於左浮動（float：left）
flex-end
類似於右浮動（float:right）
center
flex項居中
space-between
兩端對齊容器，各個flex專案之間的間距相等
space-around
每乙個flex專案兩側的間隔相等
效果演示
align-items: flex-start | flex-end | center | baseline | stretch;
屬性定義專案在交叉軸上的對齊方式
屬性/值
詳細說明
flex-start
對齊交叉軸的起點
flex-end
對齊交叉軸的終點
center
以交叉軸為參考，居中對齊
baseline
flex專案第一行文字基線對齊
stretch
如果flex專案未定義高度或者設定為auto，flex專案將佔滿整個視窗的高度
效果演示
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
屬性定義了多根軸線的對齊方式，如果只有一條軸線，那麼此屬性不起作用
屬性/值
詳細說明
flex-start
對齊交叉軸的起點
flex-end
對齊交叉軸的終點
center
以交叉軸為參考，居中對齊
space-between
交叉軸兩端對齊，軸線這間的間隔平均分布
space-around
flex專案（沿交叉軸方向）之間的間隔相等
stretch
flex專案（沿交叉軸方向）佔滿整個交叉軸
效果演示
屬性/值
詳細說明
order
用於控制flex專案的排列順序，預設為0，值越小越靠前。可取的值：0 | 1
flex-grow
用於定義flex專案的放大比例，預設為0，即使存在剩餘空間，也不放大。可取的值：0 | 1
flex-shrink
用於定義flex專案的縮小比例，預設為1，即空間不足，flex專案將等比縮小。可取的值 0 | 1
flex-basis
用於定義如何分配多餘空間預設值為auto，即flex專案本來的大小
flex
flex屬性是flex-grow，flew-shrink和flex-basis的簡寫。預設值為0 1 auto
align-self
允 許單個flex專案有不同於其他flex專案的對齊方式。預設值為auto，表示繼承父元素的align-items屬性，如果不存在父元素，則等同於 stretch。可取的值：flex-start | flex-end | center | baseline | stretch;
stretch
flex專案（沿交叉軸方向）佔滿整個交叉軸
效果演示
2009版本，我們稱之為老版本，使用的是「display:box」或者「display:inline-box」；
2011版本，我們稱之為混合版本，使用的是「display:flexbox」或者「display:inline-flexbox」；
2013版本，也就是最新語法版本，使用的是「display:flex」或者「display:inline-flex」。
剛開始研究flex彈性布局時分不清box，flexbox，和flex的區別還以為他們的作用是不一樣的，可後來慢慢收集flex相關資料時才發現原來他們指的都是同一樣東西。
更相容性細節,可前往can i use官網查詢，傳送門：
w3c最新版本介紹，傳送門：
雖然現在浮動布局還比較流行，但隨著瀏覽器的更新換代，我相信未來將會是flex布局（彈性布局）的天下。因為flex確實給我們帶來了不少的方便，甚至有些效果與傳統的布局方式相比，用彈性布局實現起來要簡單得多。
原文：**：css3 flex 彈性布局用法詳解
CSS3 flex彈性布局
css3的flex布局用法 任何乙個容器都可以指定為flex布局 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首 box 設為flex布局後，子元素的float clear 和vertical align屬性將失效。基本概念 採用css3 flex布局的...
CSS3 flex 彈性布局
為盒子模型提供最大的靈活性 基本概念 設定了 flex 布局的元素稱為 flex container 容器 所有子元素稱為 flex ite 專案 容器屬性 flex wrap 換行 預設情況下專案都排在一條線上，如果超出容器，則減少專案寬度，該屬性定義如何換行 flex flow 是 flex d...
CSS3 Flex 彈性模型布局用法
檢視 css某個屬性，相容情況 css3 flex布局 盒子模型 box sizing border box 預設 content box 平時普通盒子模型，padding，border，盒子會變大,向外擴充套件 border box 盒子模型，padding,border,盒子模型不變大,向內擴充...