flex进行页面的基础布局

接触flex有一段时间了，由于自己在移动上的经验比较少，一直以为这个和css3的其他属性差不多，就是一个盒模型的缩放之类的。今天一个移动的小项目用到了这个属性，仔细看了下，先不说里面具体的属性，就flex自身来说，就可以完爆常用的float进行布局。

由于历史原因，flex在之前也曾经被表达成box-flex, 看到一个很好的解释（英文的）,原句比较长，我简略了下：

if you Google around about Flex, you will find lots of information. Here's how you can quickly tell.

1. if you see display:box or a box-{*} property, you are looking at the old 2009 version.

2. if you see display:flexbox and the flex() function, you are looking at an akward phrase at 2011.

3. if you see display:flex and the flex-{*} property, you are looking at the current version.

flex是弹性布局的意思, 我理解是按比例分配的意思。这里网上一个博客写的很易懂。基础的知识不再赘述。这里主要提到在布局上，尤其是等高布局时的应用。

常见的，比如左侧固定，右侧自适应的布局（好多种方法都可以实现），但是如果左侧和右侧需要等高呢，传统的布局方法，我想了一下，只想出了一种。

#father{
overflow: hidden;
}
#left{
width: 200px;
}
#right{
float: right;
}

　这里是以右侧的高度为基准进行的，左侧和右侧的高度保持一致。因为浮动元素的高度是被其内容决定的，标准流元素的高度是由父元素的高度来决定的。所以这里将右侧设置为浮动，在html也要注意，需要将浮动元素写到前面。

<div id="father">
<div id="right"></div>
<div id="left"></div>
</div>

铺垫好长。。。。 累死宝宝了

下面进入正题：

#father{
width: 900px;
display: flex;
background: #ccc;
height: 300px;
}
/*大宝说最少要200px宽*/
#child-1{
background: red;
width: 200px;
}
/*二宝的比例是1，就是去掉大宝的200px后，二宝和父亲的比例是1:1*/
#child-2{
flex: 1;
-background: green;
}

也不需要什么BFC了，也不需要什么浮动了，直接等高，看起来好舒服的说~~~

并且，即使是三列布局，四列布局，宽度自适应布局，统统按照约定的比例进行执行就可以了。

#father{
display: flex;
width: 1000px;
height: 500px;
}

#child-1{
flex: 1;
-webkit-flex: 1;
}

#child-2{
flex: 4;
-webkit-flex: 4;
}

#child-3{
flex: 1;
-webkit-flex: 2;
}

弹性布局就是这么任性~~~

PS: 今天还发现了一个好玩的东西 ：autoprefixer:https://github.com/postcss/autoprefixer.比如你写了一个display: flex 脚本跑完后会自动将各个浏览器下的那些个-webkit....-moz-....等补齐，真是个好东西，可惜要在grup下使用，待姐姐摸索完了后再来记录。