放假無聊，五行缺擼，索性就這麼擼篇部落格咯，聊以自慰。

css3 中flex佈局 即為彈性佈局，在實現響應式，是非常好的。當然對於傳統的position，float佈局，如果完全只考慮移動端很大程度上能做到去float化了。但是pc端就不行，需要考慮到ie6，ie7，ie8。。。。具體看自己公司咯。這麼要求，真像一個現代穿著比基尼的大胸女人，卻還要要求她裹腳。。扯遠了····

flex是用在父元素上的，即display:flex; 當然子元素水平居中，垂直中，或者完全居中的樣式也都寫在父元素上。對於子元素 可單獨控制子元素大小。

問題是直接這麼用flex 是由問題的就是字首問題。-webkit-，-moz-, -ms-, -o-,而且還有 09年出的標準(box)，11年後的標準(flexbox，ie10特有)，和12年後至今的(flex)。所以呢，需要一個公共類，或者工具類了

.df{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
 

flex-direction 子元素的排列方式 水平豎直

flex-wrap  是否換行

flex-flow    flex-direction屬性和flex-wrap屬性的簡寫形式

justify-content    水平方向的排列

align-items  垂直方向的排列 

align-content  多列或多行的對齊方式

子元素屬性：

order  排列順序。數值越小，排列越靠前，預設為0


flex-grow  放大比例

flex-shrink 縮小比例


flex-basis 根據每項設定的基準值，按比率伸縮剩餘空間


flex   flex-grow, flex-shrink

align-self 脫離容器的對齊方式 單獨定義


以上每個屬性都要 涉及到字首，產生的css就比較多了，所以每一個屬性都可以定一個公共的類 減少程式碼量

如flex  天朝的 移動端  瀏覽器核心都是webkit 就可以只考慮 webkit了，，連opeara 都放棄自家核心 轉頭 核心都換webkit了 這行為 當時讓多少粉絲 很不情願。。。。

.flex1{
    -webkit-box-flex:1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.flex(@val){
    -webkit-box-flex:@val;
    -webkit-flex: @val;
    -ms-flex: @val;
    flex: @val;
}

item{
     .flex(2)
}

好了 ，該扯蛋點具體的佈局了，

我們需要 並排的幾個元素 一般用float ，或者display:inline-block，一個要清除浮動 clear 或者overflow：hidden，

而 display:inline-block 容器需要設定 font-size:0;vertical-align:top;

e

用 flex 了在容器(父元素)上一個

<div class="xxxxx  df">
     <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
<div>

.item{
    width:33.33333333333333%
}

<div class="xxxxx container  df">
     <div class="item flex1"></div>
   <div class="item flex1"></div>
  <div class="item flex1"></div>
<div>

很nice的完成了。

對於居中  水平垂直同時居中吧，

<div class="xxxxx  container">
     <div class="item"></div>
</div>

.container{
        position:relative;
        top:100px;
	left:100px;
	width:200px;
	height:200px;
	background-color:gray;
}
.item{
	position:absolute;
	width:20px;
	height:20px;
	background-color:red;
	top: 50%;
	left:50%;
	margin:-10px 0 0 -10px;
}

加入css3 也能搞定

.item{
	position:absolute;
	width:20px;
	height:20px;	
	background-color:red;
	top: 50%;
        left:50%;
	transform:translate(-10px,-10px);
}

<div class="xxxxx  container">
     <div class="item">fuckfuck</div>
</div>

.container{
	top:100px;
	left:100px;
	width:200px;
	height:200px;
	background-color:gray;
        /* 水平居中*/
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-pack:center;/* IE 10 */

      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;/* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/
      
      /* 垂直居中 */
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-align:center;/* IE 10 */
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center
}
.item{background-color:red;}

文字單行居中 很簡單的 height 和line-height 一樣就行了  多行的 話 就用padding  如今用

align-items: center

如下這樣居中呢

還是給容器使用：

 align-items: center

諸如此類 利用flex:1; 可以放棄使用float，但此專案不是 塊元素的 需要dispaly:block ，國內有些瀏覽器就是這麼蛋疼的。

多列的等高佈局，


傳統下 item1，item2, height都是atuo 需要給1，2設定不同的背景色，意淫的辦法就是給容器設定左右border 顏色和 width，同時relative。tiem1，2 就absolute,定位

flex 佈局下用


.item{

    aling-items:stretch;

}

同理 為三行時也是這樣做法。

。。。。。。。。。。。。。。。

。。。。。。。。。。。。。。

。。。。。。。。。。。

。。。。。。。。。

。。。。。。。

。。。。。

。。。

。

扯淡完畢。