如果类名为container,将无法横向
只需修改类名,就可以使用display: flex
源代码:
<!--pages/list/list.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
/* pages/list/list.wxss */
.container1 view{
/* 宽度 */
width: 100px;
/* 高度 */
height: 100px;
/* 文本居中 */
text-align: center;
/* 行高 */
line-height: 100px;
}
/* 修改组件背景颜色 */
/* 选中特定组件:nth-child(n) */
.container1 view:nth-child(1){
background-color: aqua;
}
.container1 view:nth-child(2){
background-color: bisque;
}
.container1 view:nth-child(3){
background-color: cornsilk;
}
.container1{
/* 将组件横向 */
display: flex;
/* 分散组件 */
justify-content: space-around;
}
运行结果: