常用的布局基本都是通过flex属性来完成的。
这里简单的说一下自己经常用到的一些布局属性。
不过 box-sizing: border-box / margin / padding 这种很基础的就不写了。
-
固定定位和相对定位
经常用到的有：
固定定位 —> position: fixed
绝对定位 —> position: absolute
相对定位 —> position: relative
其中fiexd属性与absolute属性很像，但是还是有所区别的。
简单的说，你要在整个窗口上固定一个控件的位置，那就用fixed，如果你要在某个A控件内固定B控件的位置，那么A控件就设置absolute，B控件就设置relative
具体的详细解释可以看这里：CSS中position属性( absolute | relative | static | fixed )详解
-
设置类似瀑布流的控件
具体的样式如下：
图片1.png
每个重复单位的属性如下，主要还是 display: inline-block; 这个属性。
而宽和高在这里写固定值就是为了让它每行四个（以i6为模板）
.eightBtn_wrap {
display: inline-block;
width: 180rpx;
height: 220rpx;
}
图片2.png
这个内容就是不定长的，长度就会随着内容自动增加。
因为我这里基本不会出现内容长度需要换行的问题，所以这样写也没什么问题。
但是你的内容需要换行的话，就需要做一些额外的处理的。你可以试一下。
.view-box {
display: inline-block;
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
margin: 10rpx 10rpx 10rpx 20rpx;
background-color: #f5f5f5;
border-radius: 30rpx;
}
.view-text {
display: inline;
margin: 0px 20rpx;
}
-
图片或者view的居中设置
<view class="orderRight"><image src="../images/right.png" class="orderImage"></image></view>
如上：一般设置图片都会给一个底层view来包裹住它，然后主要设置view的属性，对图片主要就设置个大小。
.orderRight{
width: 120rpx;
display: flex;
align-items: center;
justify-content: flex-end;
}
.orderImage{
width: 48rpx;
height: 48rpx;
}
设置view的属性为 display: flex，然后 align-items 和 justify-content 都有三个位置属性：flex-start | center | flex-end
分别为：左(上)对齐 | 居中 | 右(下)对齐
这个我基本都是用来设置图片才用到的，当然，设置view的话也可以。
可以参考：小程序的居中布局，你可以这样做
-
布局时处处用到的flex属性
display: flex; 这个基本是小程序中最常见的一行布局代码了。
设置父控件之后，子控件就 flex:1, flex: 2 自己慢慢分配。
具体的讲解还是直接给个传送门吧 —> 新手布局福音！微信小程序使用flex的一些基础样式属性
-
文本溢出，单行省略
有时候我们需要一行显示，最后显示不完的显示省略号
.oneLine {
overflow: hidden; /* 超出一行文字自动隐藏*/
text-overflow: ellipsis; /* 文字隐藏后添加省略号*/
white-space: nowrap; /* 强制不换行*/
}
注意：单行显示需要设置宽度！单行显示需要设置宽度！单行显示需要设置宽度！
-
文本溢出，多行省略
.view-multi-row {
/* 多行显示、并加省略号 */
display: -webkit-box;
line-height: 33rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
其中：line-height 设置每一行的行高，-webkit-line-clamp设置有多少行
如果你不限制它有多少行，那就不需要多行省略，直接让它自动增高就行了。
设置需要多行省略的话，你需要注意总体的高度问题。根据你的行高和行数自己计算一下！！！
网友评论