<template>
<view class="container">
<view class="box">
<view class="box_1">
<uni-icons type="medal" size="30"></uni-icons>
<span>一键呼叫</span>
</view>
<view class="box_1">
<uni-icons type="medal" size="30"></uni-icons>
<span>一键呼叫</span>
</view>
<view class="box_1">
<uni-icons type="medal" size="30"></uni-icons>
<span>一键呼叫</span>
</view>
<view class="box_1">
<uni-icons type="medal" size="30"></uni-icons>
<span>一键呼叫</span>
</view>
<view class="box_1">
<uni-icons type="medal" size="30"></uni-icons>
<span>一键呼叫</span>
</view>
<view class="box_1">
<uni-icons type="medal" size="30"></uni-icons>
<span>一键呼叫</span>
</view>
<view class="box_1">
<uni-icons type="medal" size="30"></uni-icons>
<span>一键呼叫</span>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
href: 'https://uniapp.dcloud.io/component/README?id=uniui'
}
},
methods: {
}
}
</script>
<style>
.box{
height: 150px;
display: flex;
justify-content: space-between;
padding: auto;
align-items: center;
flex-wrap: wrap;//主轴一行满了换行
}
.box_1{
flex: 0 30%;
height: 80px;
margin-top: 15px;
background-color: pink;
border-radius: 10px;
color: aliceblue;
display: flex;
flex-direction: column;//主轴垂直向下
justify-content: center;//主轴元素对齐方式:居中
text-align: center;//文本对齐方式:居中
}
</style>
盒子浮动flex
最新推荐文章于 2024-09-14 18:52:56 发布