uni-app快速入门（六）--rpx尺寸单位与Flex布局
一、uni-app尺寸单位
uni-app支持的通用尺寸单位包括px、rpx。为支持跨平台，在搭建空驾驶建议使用Flex布局。px指屏幕像素，rpx是响应式像素，是根据屏幕宽度自适应的动态单位。假如屏幕宽度为750像素，750rpx正好为屏幕宽度。uni-app规定基准屏幕宽度为750rpx。
设计师设计的图一般提供一个分辨率的图片，如果严格按照设计图的px进行开发，在不同宽度的手机上，界面容易变形，主要是宽度变形，因为有滚动条，在高度上一般不容易出现问题。uni-app在App端、H5端、小程序都支持rpx。页面元素在uni-app的计算公式：
750x元素在设计稿中的宽度/设计稿基准宽度：
假如设计稿宽度为750px,元素在设计稿宽度为100px，则元素在uni-app的宽度为750x100/750=100rpx；
假如设计稿宽度为640px，元素在设计稿的宽度为100px，则元素在uni-app的宽度为750x100/640,约117rpx。
当然既然知道了uni-app的基础屏幕宽度，设计稿最好直接设计成750px,这样就不用换算了。
二、Flex布局
为支持跨平台，uni-app建议使用Flex布局（Flexible Box，弹性布局）。
传统布局基于盒状模型，依赖display属性、position属性和float属性，如果使用Flex布局则不建议使用float属性。
采用Flex布局的元素为Flex容易，里面的子元素为Flex项目(Flex item)。容器指定flex布局的语法：
.box{display:flex;}
容器内元素的flex语法：.box{display:inline-flex;}
容器默认存在两个轴，横轴（水平主轴main axis）,纵轴（垂直交叉轴 cross axis）。横轴宽度为main size,纵轴高度为cross size。横轴开始位置结束位置分别称main start、main end,纵轴开始结束位置成文cross start ,cross end,这样便于理解样式里的属性含义。
Flex布局有6个容器属性：flex-direction 、flex-wrap、flex-flow、justify-content、align-items、align-content。
容器里的元素有6个属性：order、flex-grow、fle-shrink、flex-basis、flex、align-self。
【容器属性】
1、flex-direction：决定主轴方向（项目排列方向）
.box{
display:flex;
flex-direction: row;//默认值，主轴水平方向，起点为左侧；
//flex-direction: row-reverse;//主轴水平方向，起点为右侧；
//flex-direction: column;//主轴为垂直方向，起点为顶部；
//flex-direction:column-reverse;//主轴为垂直方向，起点为底部；
}
2、flex-wrap属性：默认情况下，元素排在一条线上，又称轴线上。如果一条线无法排列所有项目，可以换行到下一条线上，代码示例：
.box{
display:flex;
flex-wrap:wrap;//如果没这行，就是默认的nowrap不换行；wrap为换行，第一行在上方；
//flex-wrap: wrap-reverse;//换行，第一行在下方；
}
3、flex-flow：是上面flex-direction和flex-wrap加起来的简写形式，默认为row nowrap:
.box{
direction: flex;
flex-flow: row nowrap;
}
4、justify-content属性：定义项目在主轴上的对齐方式：
.box{
display: flex;
justify-content: flex-start;//flex-start为默认的，左对齐；flex-end为右对齐；center为居中；
// space-between:两端对齐，元素之间的间隔都相等；
// space-around: 每个元素两侧的间隔相等。因此元素之间的间隔比元素与边框的间隔大一倍。
5、align-items：定义项目在交叉轴（纵轴）的对齐方式
.box{
display:flex;
align-items: flex-start;//flex-start:纵轴起点对齐、fllex-end纵轴终点对齐、content：纵轴中点对齐。baseline:元素第一行文字的基线对齐；stretch（默认值）：如果元素未设置高度或设置为auto，则将占满整个容器高度。
}
}
6、align-content：定义多条轴线对齐方式，如果元素只有一条轴线，则此属性不起作用。
.box{
display:flex;
align-content: flex-start;//与交叉轴起点对齐。flex-end:与交叉轴终点对齐。center：与交叉轴中点对齐。space-between:与交叉轴两端对齐，轴线之间间隔相等；space-around:每条轴线两侧的间隔相等。因为，轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认)：轴线占满整个交叉轴。
}
【元素属性】
1、order属性：定义元素的排列顺序，order越小越靠前
.item{
order: 1;
}
2、flex-grow：定义元素的放大比例，默认为0，即使有剩余空间，也不放大：
.item{ flex-grow: 0;}
如果都是1，则等分空间；如果其中一个是2，其他为1，则这个2的元素比其他元素占用空间大倍。
3、flex-shrink：定义元素的缩小比例，默认为1，即如果空间不足，则该元素将缩小。
.item{ flex-shrink: 1;}
如果所有元素flex-shrink都是1，则等比例缩小；如果设置为0的则不缩小。负值对该属性无效。
4、flex-basis：定义在分配多余空间之前该元素占的空间。浏览器根据该属性计算主轴是否有多余空间，默认为auto，即元素本来大小。
.item{ flex-basis: auto;} //flex-basis可设置为与width或height属性一样的值，则元素将占据固定空间值；
5、flex：是flex-grow、flex-shrink、flex-basis的简写，就是说三周属性可设置到一起，默认值是0 1 auto 其中后两个属性为可选项：
.item{flex : 0 1 auto}
6、align-self：允许单个元素与其他元素不一样的对齐方式，可覆盖align-items属性，默认为auto，表示集成父元素的align-items属性，如果没有父元素，则等同于stretch:
.item{align-self:auto;}
该属性可以取6个值，除了auto外，其他都与align-items属性值完全一致。
原文地址：https://blog.csdn.net/baozhengw/article/details/143802827
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！