H5移动端开发知识总结(二)

==移动开发基本知识点== calc基本语法 它可以支持加，减，乘，除; 在做手机端的时候非常有用的一个知识点; 优点如下： 支持使用 "+"、"-"、"*"、"/" 四则运算 可以混合使用百分比(%)、px、em、rem等作为单位可进行计算 浏览器兼容性： IE9+、FF4.0+、chrome19+、safari6+ 用法： .box { width: calc(100% - 20px - 2em); } 容器的6个属性 flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction 本属性觉得主轴的方向 row(默认值)：主轴为水平方向，起点在左端 row-reverse: 主轴为水平方向，起点在右端 column: 主轴为垂直方向，起点在上沿 column-reverse: 主轴为垂直方向，起点在下沿 flex-wrap 默认情况下，项目都排在一条线上,flex-wrap属性定义如果一条线排不下，可以换行 nowrap(默认) 不换行 wrap: 换行，第一行在上方 wrap-reverse：换行，第一行在下方 flex-row 该属性是flex-direction属性和flex-warp属性的简写 justify-content 该属性定义了项目在主轴上的对齐方式 属性值 对齐方式 flex-start(默认) 左对齐 flex-end 右对齐 center 居中 space-between 两端对齐，间隔相等 space-around 每个项目两侧的间隔都相等 align-items 该属性定义项目在交叉轴上如何对齐 属性值 对齐方式 flex-start 交叉轴起点对齐 flex-end 交叉轴终点对齐 center 交叉轴 中点对齐 baseline 项目的第一行文字是基线对齐 stretch（默认值） 如果项目未设置高度或者设为auto，将占满整个容器 align-content属性 该属性定义了多跟轴线的对齐方式，如果项目只有一根轴线则不起作用 属性值 对齐方式 flex-start 与交叉轴的起点对齐 flex-end 与交叉轴的终点对齐 center 与交叉轴的中点对齐 space-between 与交叉轴的两端对齐，轴线之间间隔平均分布 space-around 每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍 stretch(默认值) 轴线占满整个交叉轴 项目的属性一下有6个属性可以设置在项目中 order flex-grow flex-shrink flex-basis flex align-flex order属性 order属性定义了项目的排序顺序。数值越小，排列越靠前 .xxx{ order: } flex-grow属性 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 .xxx{ flex-grow: } flex-shrink属性 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 .xxx{ flex-shrink: } flex-basis属性 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size） 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目本来大小 .xxx{ flex-basis: | auto } flex属性 flex属性是flex-grow，flex-shrink 和 flex-basis的简写。默认为 0 1 auto align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖algin-items属性，默认为auto，表示继承父元素的align-items属性。如果没有父元素。则等同于stretch .xxx{ align-self: auto | flex-start | flex-end | center | baseline | stretch } 相关链接 H5移动端开发知识总结(一) H5移动端开发知识总结(二) H5移动端开发知识总结(三)

本文章由javascript技术分享原创和收集