1. flex layout
<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>
Page effect:
2. Solutions
Method 1: grid layout
.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;
}
}
Page effect:
Method 2: Add a pseudo-element to the parent element and set flex:auto or flex:1 to it
3. grid layout
Grid layout is grid layout, which is a new css model. Generally, a page is divided into several main areas, and the relationship between the size, position and level of these areas is defined. It is currently the only two-dimensional layout of css .
Reference link
Reference link