本文共 1964 字，大约阅读时间需要 6 分钟。

盒子模型（Flexible Box） 属性

box-align属性和box-pack属性

1. box- align属性指定box的子元素如何对齐。

   值	说明
   start	对于正常方向的boxes，每个子元素的顶部边缘放在沿box的顶部。反向箱，每个子元素的底边放在沿box的底部
   end	对于正常方向的boxes，每个子元素的顶部边缘放在沿box的底部。反向箱，每个子元素的底边放在沿box的顶部
   center	任何多余的空间被划分均匀，一半以上的子元素放在上面，剩下的子元素放在另一半
   baseline	如果box-orient是内嵌单轴或横向，所有的子元素都置于他们的基线对齐
   stretch	子元素拉伸以填充包含区块

2. box-pack属性指定一个box的子元素时，被置于该框的子元素小于该框。

   值	说明
   start	对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）
   end	对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）
   center	额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素
   justify	额外的空间平均分配给每个子元素

举例：

    
           
   
    
    
Center me!
   

Google 浏览器中打开，查看效果：

box-direction属性

1. box-direction属性指定显示哪个方向的box的子元素。

   值	描述
   normal	以默认方向显示子元素。
   reverse	以反方向显示子元素。
   inherit	应该从子元素继承 box-direction 属性的值

举例：

由右至左，显示一个div box的子元素。

    
           
   
    
    
《Cat》
    
    
《Dog》
    
    
《Horse》
   

Google 浏览器中打开，查看效果：

box-flex属性

1. box-flex属性指定box的子元素是否灵活或固定的大小。

   值	描述
   value	元素的灵活性。所有Flex都是相对的

举例：

定义两个灵活的p元素。如果父级box的总宽度为300px，＃P1将有一个100px的宽度，＃P2将有一个200px的宽度：

    
           
   
    
    
Hello
    
    
CSS
   

Google 浏览器中打开，查看效果：

box-ordinal-group属性

box-ordinal-group属性指定一个box的子元素的显示顺序。

举例：

指定的一个box的子元素的显示顺序：

    
           
   
    
    
     First in source
    
    
    
     Second in source
    
    
    
     Third in source
    
   

Google 浏览器中打开，查看效果：

box-orient 属性

box-orient 属性指定一个box子元素是否应按水平或垂直排列。

举例：

指定div元素的子元素横向排列：

    
           
   
    
    
《Cat》
    
    
《Dog》
    
    
《Horse》
   

Google 浏览器中打开，查看效果：