微信小程序 flex一行两列

最新推荐文章于 2024-05-17 11:34:10 发布

划水小将军

最新推荐文章于 2024-05-17 11:34:10 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_44309969/article/details/128212560

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

微信小程序 flex一行两列

展示图

在这里插入图片描述

wxml代码

<!-- 头部-->
<view class="top">
    <text>工具箱</text>
</view>

<!-- 内容部分 -->
<view class="main">

    <view class="A_column">
        <view class="A_column_container">
            <image src="/images/basketball.png" class="line_image"></image>
            <text>篮球</text>
        </view>
    </view>
    <view class="A_column">
        <view class="A_column_container">
            <image src="/images/basketball.png" class="line_image"></image>
            <text>篮球</text>
        </view>
    </view>
    <view class="A_column">
        <view class="A_column_container">
            <image src="/images/basketball.png" class="line_image"></image>
            <text>篮球</text>
        </view>
    </view>
    <view class="A_column">
        <view class="A_column_container">
            <image src="/images/basketball.png" class="line_image"></image>
            <text>篮球</text>
        </view>
    </view>
    <view class="A_column">
        <view class="A_column_container">
            <image src="/images/basketball.png" class="line_image"></image>
            <text>篮球</text>
        </view>
    </view>
    <view class="A_column">
        <view class="A_column_container">
            <image src="/images/basketball.png" class="line_image"></image>
            <text>篮球</text>
        </view>
    </view>
    <view class="A_column">
        <view class="A_column_container">
            <image src="/images/basketball.png" class="line_image"></image>
            <text>篮球</text>
        </view>
    </view>
    <view class="A_column">
        <view class="A_column_container">
            <image src="/images/basketball.png" class="line_image"></image>
            <text>篮球</text>
        </view>
    </view>

</view>

<!-- </view> -->

wxss代码

.container {
    width: 100%;
    display: grid;
    /*将页面设置为网格布局*/
    grid-template-columns: 50%;
    /*网格设置为三列，每列宽150*/
    grid-template-rows: 100rpx;
    margin: 20rpx;
    /*网格设置为三行，每行高100*/
}



.top {
    padding: 10px;
    background-color: rgb(241, 183, 172);
    text-align: center;
}

.top text {
    color: rgb(64, 206, 231);
    font-size: large;
    text-align: center;
}


/**精品推荐 1行2列图片的样式**/
.main {
    display: flex;
    flex-wrap: wrap;
    /**自动换行***/
    margin-top: 10rpx;
}

.A_column {
    margin-top: 10rpx;
    width: 40%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 4.6%;
}

.A_column_container{
    background-color: rgb(182, 234, 243);
    padding-top: 1rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 10%;
}

.line_image {
    width: 200rpx;
    height: 200rpx;
    padding-top: 10rpx;
}

.A_column text{
    margin-bottom: 18rpx;
}