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>