flex
刚把-webkit-box-的属性过了一下,又说过时了(09年的没定标准以前的写法)。现在已经用flex(12年标准出来后的写法) 学习一下: 1:flex display:flex 设置容器可以弹性布局 2:flex:value flex:value相对有同一容器的其他灵活的项目,规定项目的长度 3:flex-grow flex-grow用来指定扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。 在「flex」属性中该值如果被省略则默认为「1」 flex-grow:number/initial/inherit(感觉和flex:value蛮像的,有待深入了解) 参考?http://www.css88.com/book/css/properties/flex/flex-grow.htm 4:flex-shrink flex-shrink用来指定收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。 flex-shrink:number/initial/inherit 参考http://www.css88.com/book/css/properties/flex/flex-shrink.htm 5:flex-basis 用来指定伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值。 (以上参考:http://www.css88.com/book/css/properties/flex/flex.htm) 6:flex-flow:flow-direction flow-wrap flex-direction:定义弹性盒模型对象子元素的排列方向 flex-direction:row/column/row-reverse/column-reverse flex:wrap:控制flex容器是单行或是多行(-webkit-box-lines:multiple虽然浏览器有这个属性但是不起什么作用) flex-wrap:nowarp/wrap/wrap-reverse 7:align-content align-content:flex-start/flex-end/center/space-between/space-around/stretch 8:align-item align-item:flex-start/flex-end/center/baseline/stretch 9:align-self align-self:定义flex子项单独在侧轴(纵轴)方向上的对齐方式 align-self:auto/flex-start/flex-end/center/baseline/stretch 10:justify-content justify-content设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式 justify-content:flex-start/flex-end/center/space-between/space-around 11:order order:设置或检索弹性盒模型对象的子元素出现的顺序数值越小排在前面,数值可以为负值 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |