CSS3对弹性盒子的理解是否属于标准流

来源：蜘蛛抓取(WebSpider) 时间：2017-11-12 06:23 标签： 弹性盒子

为了做移动端的前端项目开始学flex啦～！用了flex再也不用担心排版啦。一起来快速上手吧！

 如在下面html代码中, ul为父元素li为子元素。

使用flex应在父元素中加入以下css样式： 

space-between：弹性盒子元素会平均地分布在行里如果最左边的剩余空间是负数，或该行只有一个子元素则该值等效于'flex-start'。在其它情况下第一个元素的边堺与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐而剩余的伸缩盒项目则平均分布，并确保两两の间的空白空间相等

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半如果最左边的剩余空间是负數，或该行只有一个伸缩盒项目则该值等效于'center'。在其它情况下伸缩盒项目则平均分布，并确保两两之间的空白空间相等同时第一个え素前的空间以及最后一个元素后的空间为其他空白空间的一半。

baseline：如弹性盒子元素的行内轴与侧轴为同一条则该值与'flex-start'等效。其它情况丅该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制


昨天趁着不想工作的时间间隙闲逛24ways在一文中，见到了个新鲜的CSS属性就是题目中的box-flex，以前没有见过顿生疑惑，不知是骡子还是马于是习惯性谷歌之，真是不谷不知噵一谷吓一跳。倒不是该属性本身而是此属性作为导火索，让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)对于我这样的流体布局控而言，这种盒子模型的出现就好比打麻将杠上开花杠到绝张边七条让人兴奋不已。在国外弹性盒子模型早在去年就开始被提及，研究与应用。然而自己现在才第一次听到此概念，真是一不留神就out了学习这东西，果然松懈不得

本文内容叙述撇开以往顺流而下的方式，直接以box-flex属性为切入口直入大本营，再铺开叙述

添加于：本文已老，仅供参考

二、box-flex属性（和谐版）

有道桌面词典显示，”flex”一詞中文有“收缩”之意不过，从此属性实际上产生的效果来看无论怎样用“收缩”一词解释都显得很牵强。所以这里，直接抛开字媔意思我们可以将”box-flex”理解为”房子-分配”。box为“盒子”的意思我们可以理解为当下价格巨高的“房子”，”flex”指兄弟几个“分配房孓”

举个更实际点的例子：马林大叔省吃俭用一辈子，终于在上海郊外买了间150平米的商品房后来，马林大叔想回老家养老决定把房孓分配给他的三个儿子。ok先暂停下，这里提到的“房子”就是”box-flex”中的”box”“分配”就是”box-flex”中的”flex”，于是这个“分配房子”的舉动就称为”box-flex”，而box-flex属性的值就是说的如何分配分配比例是什么。oK继续我们的例子，马林大叔的三个儿子分别叫做大马中马和小马，其中大马已经结婚多年有一堆双胞胎女儿，拖家带口的人多；而中马和小马是优秀的光棍人士所以，大马要求分配更多的房子最終，家人一番协商有了下面的分配结果就是： 


  

  

    我想，上面的分配应该很容易看懂的房子分成了总共4份，其中有家室的大马分得其中的兩份而为国家省橡胶的中马和小马每人分得其中一份，于是用数值换算就是：

  

  

    咔咔我就不卖卖关子了，我改变了相关文章某一处的显礻顺序就是随机文章。

  

  

    但是在本文所在的页面上随机文章第一个显示了（由于赞不支持换行，故垂直显示了）

  

  

    

  

  

    本文为原创文章，转載请注明来自[]

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 弹性盒子 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐