CSS3 弹性盒模型 display:flex

废话不多说，直接对比之后上手使用。

平时我们做导航的时候都是用<ul><li>a</li><li>b</li><li>c</li></ul>布局，然后让 li 浮动，设置宽高，然后进一步进行操作

我们就拿ul这个例子来做弹性盒模型，看这个东西到底有多少作用。要想实现display：flex，必须考虑几点：1、要定义父级是个盒子（就是定义ul是个盒子，方法就是 display:box），你display：flex，flex的是兄弟节点(就是之前的li，不要仅仅知道display:flex，就想起作用，必须先配好父级)；2、浏览器的内核  -webkit- /  -moz-  /  -o-  /  -ms-(因为不兼容，所以需要单独去配。例：display:-webkit-box;)

我们知道原理，知道怎么配之后，就需要考虑玩法。玩法包括，我能不能单独设置某个Li的大小；能不能竖着排列；我布局好了之后，老板觉得第三个标签应该放第一位，我怎么去改；等等的玩法；

最基本的就是怎么让li水平或者纵向排列，每个属性都有个默认值，就好像div的默认dislay就是block； 那弹性盒模型的默认排列就是水平排列 box-orient：horizontal，这个怎么用，用到父级身上，就是你让ul的display:box的时候你顺带设置box-orient：horizontal；如果你想换乘纵向，就是设置属性值为：vertical；

说完了排列，下一步就得说我里面的Li占了多宽，父级设置完了，现在玩子级；玩子级离不开对齐方式，分配父级剩余空间；这个剩余空间一定搞清楚了，比如ul宽度为1000px；一共3个子元素，2个子元素设置了box-flex:1;另外一个元素设置了宽度600px;那么这2个flex的元素的宽度分别是200；意思就是总元素要优先减去所有涉及宽度，子元素的宽度，子元素的Padding，margin,父元素的padding；