flex-box简单使用(一)

看着张鑫旭大神的博客，来学习一下flex-box。张鑫旭大神2010年写的
flex-box详解，今年是2016年了~

最近在做移动端页面。在此之前没有详细了解过移动端页面开发的一些细节。直接上手就做起来了，按照在pc端的布局方式去写移动端的页面。会遇到一些稍微麻烦的地方。
比如均等分割一个block为三块,如下。

1	2	3

张鑫旭大神使用分房子的比喻来描述父block被其三个子block划分。

要实现三列均等分割，需要指定两个css属性。
1. 父元素添加display:box;
2. 子元素添加box-flex:num; //这里的num是一个数值(没有单位)，用于表示该子元素所能够占用的空间比例

示例代码如下

ul,li{padding:0,margin:0;list-style:none;}
ul{ display:box;
    display:-webkit-box;
    displau:-mox-box;
    width:800px;
    border:1px solid #ccc;}
li{ background:red;
    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

为li指定box-flex:1; ul有三个li子元素，每一个li的box-flex:1;按照比例，每个li得到的宽度就是 800*(1/(1+1+1));
如果不指定父block的宽度，则其默认宽度沾满屏幕。

如果需要某一列固定宽度，只需要为其指定宽度，剩下的空间会根据其兄弟元素的分配比例进行划分，代码如下：

ul,li{padding:0,margin:0;list-style:none;}
ul{ display:box;
    display:-webkit-box;
    displau:-mox-box;
    width:800px;
    border:1px solid #ccc;}
li{ background:red;
    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;}
li:first-child{
    width:400px;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>