使用flex布局，默认布局下块级元素是会换行的，但设置了flex布局后默认就都水平排列了（水平方向）justify-content:

<p style="text-indent:50px;">flex-start（居于轴线的开头）

<p style="text-indent:50px;">center（居于轴线的中间）

<p style="text-indent:50px;">flex-end（居于轴线的末端）

<p style="text-indent:50px;">space-around（将子元素按比例排列在轴线上）

<p style="text-indent:50px;">space-between（将子元素排列在轴线两端） （垂直方向）align-items:

<p style="text-indent:50px;">同justify-content 

图片设置代码：

.wxml

<pre class="has">
//用class来声明样式名

// in-img

.wxss

<pre class="has">
.imagesize{
display:flex; //flex布局
align-items: flex-start; //垂直轴线的开头
justify-content: flex-end; //水平轴线的末端
}
.imagesize image { //设置图片尺寸，**这里是我在官方那没找到的
width: 400rpx;
height: 400rpx;
}

字体设置

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">wxss 文本属性（text）</td>
</tr>
<tr>
<td>属性</td>
<td>说明</td>
<td>语法(属性值)</td>
</tr>
<tr>
<td>color</td>
<td>设置文本颜色</td>
</tr>
<tr>
<td>direction</td>
<td>设置文本方向。</td>
<td>ltr:文本方向从左到右;rtl:文本方向从右到左</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>设置字符间距</td>
</tr>
<tr>
<td>line-height</td>
<td>设置行高</td>
</tr>
<tr>
<td>text-align</td>
<td>对齐元素中的文本</td>
<td>left：把文本排列到左边。默认值，由浏览器决定。
right：把文本排列到右边。
center：把文本排列到中间。
justify：实现两端对齐文本效果。
inherit: 规定应该从父元素继承 text-align 属性的值。</td>
</tr>
<tr>
<td>text-decoration</td>
<td>向文本添加修饰</td>
<td>underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。</td>
</tr>
<tr>
<td>text-indent</td>
<td>缩进元素中文本的首行</td>
</tr>
<tr>
<td>text-shadow</td>
<td>设置文本阴影</td>
<td>text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,允许负值;
v-shadow:垂直阴影的位置,允许负值;
blur:模糊的距离;
color:阴影的颜色</td>
</tr>
<tr>
<td>text-transform</td>
<td>控制元素中的字母</td>
<td>capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。</td>
</tr>
<tr>
<td>unicode-bidi</td>
<td>设置或返回文本是否被重写 </td>
</tr>
<tr>
<td>vertical-align</td>
<td>设置元素的垂直对齐</td>
</tr>
<tr>
<td>white-space</td>
<td>设置元素中空白的处理方式</td>
</tr>
<tr>
<td>word-spacing</td>
<td>设置字间距</td>
</tr>

属性（font）属性属性值)属性显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。显示文本显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承 font-variant 属性的值。.wxml

<pre class="has">
<code class="language-css">{{title}} //声明titlesize样式名，下面也是

介绍：{{intro}} 手机：{{contact}} 地址: {{address}} 微信号：{{wechat}} 邮箱：{{email}}

.wxss

<pre class="has">
.titlesize{
font-size: 45px; //字号
font-weight: bold; //加粗
text-align:center; //居中
color:red //红色
}
.introsize{
font-size: 20px;
font-weight: normal;
text-align:left;
color:blue
}
.phonesize{
font-size: 18px;
font-weight: normal;
text-align:right;
color:green
}
.adresssize{
font-size: 16px;
font-weight: normal;
text-align:center;
color:salmon
}
.wechatsize{
font-size: 14px;
font-weight: normal;
text-align:left;
color:darkblue
}
.emailsize{
font-size: 12px;
font-weight: normal;
text-align:right;
color:lightblue
}

先看显示结果图（代码等下完整给）：

已完成预想的4点。

三、代码（主要看懂代码，要改的再查也行）：

其实只是在.wxml文件里加了class=‘’，用来声明样式名。

又在.wxss里给出了详细设置。

本篇在nofollow">上篇代码之上改的，没给的其他都没改，代码如下：

aboutme.wxml

<pre class="has">
@H_404_166@

{{title}} 介绍：{{intro}} 手机：{{contact}} 地址: {{address}} 微信号：{{wechat}} 邮箱：{{email}}

aboutme.wxss

<pre class="has">
.imagesize{
float: right;
}
.imagesize image {

width: 400rpx;
height: 400rpx;
}
.titlesize{
font-size: 45px;
font-weight: bold;
text-align:center;
color:red
}
.introsize{
font-size: 20px;
font-weight: normal;
text-align:left;
color:blue
}
.phonesize{
font-size: 18px;
font-weight: normal;
text-align:right;
color:green
}
.adresssize{
font-size: 16px;
font-weight: normal;
text-align:center;
color:salmon
}
.wechatsize{
font-size: 14px;
font-weight: normal;
text-align:left;
color:darkblue
}
.emailsize{
font-size: 12px;
font-weight: normal;
text-align:right;
color:lightblue
}

谢谢阅读。共同进步！