1. flex布局
<template>
<view class="container">
<view class="btn-container">
<button v-for="(item,index) in typeList" :key="index" @click="handlerClick(item)">{
{item.text}}</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
typeList:[
{
value: 0, text: "小野友树" },
{
value: 1, text: "佐藤拓也" },
{
value: 2, text: "近藤隆" },
]
}
},
methods:{
handlerClick(e) {
console.log('点击的是',e.value)
}
}
}
</script>
<style lang="scss">
.container {
display: flex;
justify-content: center;
.btn-container {
display:flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 90rpx;
width: 90%;
button {
width: 310rpx;
height: 90rpx;
line-height: 90rpx;
margin-bottom: 40rpx;
background-color: #169bd5;
color: #fff;
font-size: 30rpx;
}
}
}
</style>
页面效果：
2. 解决方式
方法一：grid布局
.btn-container {
display: grid;
grid-template-columns: repeat(2,auto);
margin-top: 90rpx;
width: 90%;
button {
width: 310rpx;
height: 90rpx;
line-height: 90rpx;
margin-bottom: 40rpx;
background-color: #169bd5;
color: #fff;
font-size: 30rpx;
}
}
页面效果：
方法二：给父元素加伪元素并给其设置flex:auto或flex:1
3. grid布局
Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。
参考链接
参考链接