旧盒子复习

旧盒子:

父元素：display:-webkit-box;(主轴为水平==-webkit-box-orient:horizontal)，此时可以用此效果加overflow:hidden做简单的轮播图；

交叉轴：-webkit-box-align:stretch(拉伸，子元素没有设定高度时)，start，end，center，baseline；

主轴上：（如果想要看到效果就不要给子元素设置box-flex）-webkit-box-pack：start（默认），end center，justify

当定义主轴为竖直方向时：-webkit-box-orient：vertical ；此时交叉轴和主轴的方向互换。

-webkit-box-direction：normal，reverse（反向）子元素的排列顺序；

子元素：-webkit-box-flex：integer；声明自己占的份数，如果子元素的总宽度超过父元素，则超过的部分除以相应的份数的值为X，然后各个子元素在设定的宽度的基础上减少相对应的份数乘X.

-webkit-box-flex-group：integer（默认为1）首先必须有box-flex，然后在子元素中寻找值最大 的那个子元素，领其宽度为其内容的宽度（如果无内容，padding，border则不存在），然后剩下的子元素按照其所占的box-flex的份数进行分配。

-webkit-box-ordinal-group：integer；子元素的排列顺序，数值小的在前面，相同的按照文档流的顺序，默认值为1，可接受的最小值也为1，如果小于1则按照默认值算。

---------------------------------------------------------

 

 

 

 

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有