理解flex是学习小程序的第一步！！！

冷咖啡爱编程

已于 2023-02-09 19:17:50 修改

阅读量105

点赞数

文章标签：学习方法 Powered by 金山文档

于 2023-02-09 19:15:11 首次发布

本文链接：https://blog.csdn.net/m0_62874469/article/details/128959033

版权

flex示例

事例

1.1wxml写内容

1.2wxss写布局

2.代码

<view class="auction">
    <view class="item">		//组件一
        <view class="text">活动一 篮球比赛</view>

        <view class="tips">
            <view class="times">2022/03/02</view>
            <view class="count">111次围观</view>
        </view>

        <view class="big">
            <image src="/image/1.jpg"></image>
        </view>

        <view class="small">
            <image src="/image/me.png"></image>
            <image src="/image/home.png"></image>
            <image src="/image/plan.png"></image>
        </view>
    </view>

    <view class="item">		//组件二
        <view class="text">活动一 篮球比赛</view>

        <view class="tips">
            <view class="times">2022/03/02</view>
            <view class="count">111次围观</view>
        </view>

        <view class="big">
            <image src="/image/1.jpg"></image>
        </view>

        <view class="small">
            <image src="/image/me.png"></image>
            <image src="/image/home.png"></image>
            <image src="/image/plan.png"></image>
        </view>
    </view>

</view>

.auction .item{}

.auction .item .text{
    font-size: 50rpx;		//文字大小
    font-weight: 600;		//文字加粗
}
.auction .item .tips{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 30rpx;
    color: #8c8c8c;
}
.auction .item .big{
    height: 400rpx;
    overflow: hidden;    //图片超过范围隐藏起来
}
.auction .item .big image{
    width: 100%;
    height: 100%;
}
.auction .item .small{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.auction .item .small image{	//组件里的图片要单独设置
    height: 100rpx;
    width: 100rpx;
    padding-right: 20rpx;		//右边空20
}