CSS3 box-flex 属性

[TOC]

流布局存在的问题

1. 之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2. flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。

提供的关于盒模型的几个属性：

box-orient           子元素排列 vertical or horizontal
box-flex             兄弟元素之间比例，仅作一个系数
box-align            box 排列
box-direction        box 方向
box-flex-group       以组为单位的流体系数
box-lines
box-ordinal-group    以组为单位的子元素排列方向
box-pack以下是关于flexible box的几个实例

几种布局方法

三列自适应布局，且有固定margin：

    
1
    
2
    
3

image

当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：

    
200px
    
比例1
    
比例2

image

下面是一个常见的web page 的基本布局：

    
Header
    

        
定宽200
        
比例3
        
比例1
    
    
Footer

image