放假无聊，五行缺撸，索性就这么撸篇博客咯，聊以自慰。
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 和 flex-basis的简写，默认值为0 1 auto
align-self 脱离容器的对齐方式 单独定义
以上每个属性都要 涉及到前缀，产生的css就比较多了，所以每一个属性都可以定一个公共的类 减少代码量
如flex 天朝的 移动端 浏览器内核都是webkit 就可以只考虑 webkit了，，连opeara 都放弃自家内核 转头 内核都换webkit了 这行为 当时让多少粉丝 很不情愿。。。。
.flex1{
-webkit-box-flex:1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
要是用less(或者sass)开发，还可以这么定义一个
.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);
}这样的弊端就是 你需要确切知道 item 的 width ，height 大小，利用 flex 就不用这么顾虑
<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 布局下用
aling-items:stretch;
}
同理 为三行时也是这样做法。
。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。
。。。。。。。。。。。
。。。。。。。。。
。。。。。。。
。。。。。
。。。
。
扯淡完毕。
