⼩程序布局Flex弹性布局例⼦横向排列
效果
wxml
<view class="container1">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
</view>
wxss
.container1 {
display: flex;  /**指定flex 布局*/
flex-direction:row; /**布局内item ⽅向*/
flex-wrap:wrap; /**不够了就换⾏*/
justify-content:space-between; /**主轴两边对其*/
border:red 1pt solid; /**显⽰边框*/
}
.
container1 view{
display: flex; /**指定flex 布局*/
width:100rpx; /**宽度*/
height:100rpx; /**⾼度*/
justify-content:center; /**主轴居中*/
align-items:center; /**交叉轴居中*/
border: 1pt #aaa solid; /**显⽰边框*/
}
纵向列表
效果
wxml
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
</view>
wxss
.container2 {
display: flex;  /**指定flex 布局*/
flex-direction:column; /**主轴⽅向*/ }
.container2 view{
border: 1pt #aaa solid; /**显⽰边框*/  width:100%; /**宽度*/
height:100rpx; /**⾼度指定*/
background-color: greenyellow;
text-align: center; /**⽂字居中*/
line-height: 100rpx; /**⽂字居中*/
}
简单的登录界⾯
效果
wxml
<image class='logo' src='/images/avic_logo.png'></image>
<text class="input_text">⽤户名</text>
<input name="username" placeholder='请输⽤户名'></input>
<text class="input_text">密码</text>
<input type='password' placeholder='请输⼊密码'></input>
<button class="submit" form-type='submit' type='primary'>登录</button>  <text class="reg">点这⾥注册</text>
</view>
.container {
display: flex;  /**指定flex 布局*/
flex-direction:column; /**布局内item ⽅向*/
justify-content:center; /**主轴居中*/
align-items: center;
padding: 0rpx 30rpx 0 30rpx;
}
.logo{
margin:150rpx 0rpx 150rpx 0rpx;
width: 200rpx;
height: 200rpx;
}
.input_text{
width: 100%;
font-size: 30rpx;
color:#666;
margin-bottom: 20rpx;
font-weight: bold;
}
input{
width: 100%;
height: 70rpx;
border: 1rpx #bbb solid;
border-radius: 10rpx;
margin-bottom: 20rpx;
font-size: 30rpx;
padding-left: 20rpx;
}
html的flex布局
.submit{
margin-top: 50rpx;
width:100%;
}
.reg{
margin-right: 20rpx;
margin-top: 30rpx;
font-size: 25rpx;
align-self: flex-end;
color: #88f
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。