作用：彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。
彈性布局是定義在乙個父容器中，加上display：flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。
彈性布局預設排列方式是子元素不換行，橫向排列
彈性布局的屬性主要有：
flow-wrap： nowrap（預設）：不換行。
當所有子元素的寬度大於容器寬度時，每個子元素都會被擠壓寬度；
flow-wrap： wrap： 換行，並且第一行在容器最上方；
flex-direction
: reverse：所有子元素反向排列 第乙個在最後乙個位置，第二個在倒數第二個位置。。。。。
flex-direction
:noreverse 不反向
*定義父容器*
1. **display：flex**；
主軸 即設定水平方向的對齊方式
2. justify-content：；交叉軸 即設定豎直方向的對齊方式
4. align-items：；
主軸：主軸是水平方向,乙個彈性布局中可能會有很多個主軸和交叉軸以進行更加複雜的布局。水平方向預設從左到右即flex-start進行布局
flex-start：水平方向從左到右對齊
flex-end：水平方向從右到左對齊
center： 將所有子元素在水平方向集中，並且第乙個子元素和最後乙個子元素到父容器的左邊和右邊的間距是相等的。
space-between:兩端的子元素左右對齊父容器，中間的元素之間距離相等。
space-around: 每個子元素都有乙個相同的距離值。
space-evenly: 每個子元素之間的距離相同（包括到父元素邊框的距離也相同相等）
試例**
"father">
"one">第乙個子元素
"two">第二個子元素
"three">第三個子元素
flex-start：垂直方向從上到下對齊
flex-end：垂直方向從下到上對齊
center： 每乙個子元素的中心到上下父容器邊框的距離都相等
strech：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
baseline：以所有子元素的第一行文字基線進行對齊。(文字的行高、字型大小會影響每行的基線)
CSS之Flex彈性布局
flex彈性布局實現水平垂直居中 父盒子display flex 子盒子margin auto 概念 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 父容器 displa...
css彈性布局（flex）
1 概念解讀 傳統的布局解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。但對於一些特殊的布局方式 如垂直居中 傳統盒模型顯得有點力不從心，而對彈性布局 flex 來說卻很容易實現。2009年，w3c 提出了一種新的方案 flex 布局 flex是flexib...
css之flex彈性布局使用
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...