CSS3弹性盒布局

标签：contain   pac   code   分享   class   ide   padding   布局   containe   

1. 使用自适应的窗口弹性盒布局

   可以使div总宽度等于浏览器宽度，而且可以随着浏览器的改变而改变。

    1 
    2 "zh-CN">
    3 4     "content-type" content="text/html; charset=utf-8">
    5     "x-ua-compatible" content="IE=edge">
    6     "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    7      8     34 
   35 
   36 
   "container">
   37     
   "left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   38     
   "content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   39     
   "right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   40 
   41 
   42 

2. 改变元素的显示顺序

   box-ordinal-group可以改变各个元素的显示顺序。

    1 
    2 "zh-CN">
    3  4     "content-type" content="text/html; charset=utf-8">
    5     "x-ua-compatible" content="IE=edge">
    6     "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    7      8     40 
   41 
   42 
   "container">
   43     
   "left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   44     
   "content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   45     
   "right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   46 
   47 
   48 

3. 改变元素的排列方向

   使用box-orient改变多个元素的排列方向。

    1 
    2 "zh-CN">
    3  4     "content-type" content="text/html; charset=utf-8">
    5     "x-ua-compatible" content="IE=edge">
    6     "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    7      8     42 
   43 
   44 
   "container">
   45     
   "left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   46     
   "content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   47     
   "right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   48 
   49 
   50 

4. 元素宽度与高度的自适应

   虽然使用盒布局时，元素的高度与宽度具有了一定的适应性，但是容器中总还是会留出一大片空白区域。

5. 使用弹性盒布局来消除空白

   使用弹性盒布局可以消除盒布局残留的空白问题。

    1 
    2 "zh-CN">
    3  4     "content-type" content="text/html; charset=utf-8">
    5     "x-ua-compatible" content="IE=edge">
    6     "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    7      8     50 
   51 
   52 
   "container">
   53     
   "left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   54     
   "content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   55     
   "right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   56 
   57 
   58 

6. 对多个元素使用box-flex属性

   如果每个div元素都有box-flex，那么每个元素的宽高等于容器宽高的1/n。容器的空白部分根据box-flex的属性值进行分配。
   

   示例代码：

    1 
    2 "zh-CN">
    3  4     "content-type" content="text/html; charset=utf-8">
    5     "x-ua-compatible" content="IE=edge">
    6     "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    7      8     52 
   53 
   54 
   "container">
   55     
   "left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   56     
   "content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   57     
   "right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。
   58 
   59 
   60 

7. 指定水平方向与垂直方向的对齐方式

    可以使用box-pack属性及box-align属性来指定元素中文字、图片水平或垂直方向的对齐方式。
   

   示例代码：

    1 
    2 "zh-CN">
    3  4     "content-type" content="text/html; charset=utf-8">
    5     "x-ua-compatible" content="IE=edge">
    6     "viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    7      8     46 
   47 
   48 
   "container">
   49     
   "content">示例文字。
   50 
   51 
   52 

CSS3弹性盒布局

标签：contain   pac   code   分享   class   ide   padding   布局   containe   

原文地址：http://www.cnblogs.com/tinyTea/p/7090621.html