四组相同结构,上面2个是list-cell,下面2个是view-view,显示不正常的有:
view中都是正常的。
1,在list
的justify-content: flex-start;
时,也就是默认值,cell
的margin左右全放到右边了,上下不显示;
2,在list
的justify-content: flex-end;
时,子元素不是从底部开始(要是说list必须从顶部开始也能接受),cell
的margin左右显示,上下不显示,没明白为什么是justify-content
影响子元素的左右排列;
3,在justify-content: flex-start;
时或默认不填时,align-items
无论填什么都等于同于align-items: flex-start;
;
<template>
<view class="content">
<list class="list1">
<cell class="cell" v-for="i in 2">
<text class="text">list-cell flex-start</text>
</cell>
</list>
<list class="list2">
<cell class="cell" v-for="i in 2">
<text class="text">list-cell flex-end</text>
</cell>
</list>
<view class="view1">
<view class="cell" v-for="j in 2">
<text class="text">view-view flex-start</text>
</view>
</view>
<view class="view2">
<view class="cell" v-for="j in 2">
<text class="text">view-view flex-end</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
.content {
flex: 1;
}
.list {
flex: 1;
background-color: #55aa7f;
}
.list1 {
flex: 1;
flex-direction: column;
background-color: #55aa7f;
justify-content: flex-start;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
}
.list2 {
flex: 1;
flex-direction: column;
background-color: #00aaff;
justify-content: flex-end;
/* align-items: flex-end; */
/* align-items: flex-start; */
/* align-items: center; */
}
.view1 {
flex: 1;
background-color: #55557f;
}
.view2 {
flex: 1;
background-color: #550000;
justify-content: flex-end;
}
.cell {
background-color: #2C405A;
margin: 10px;
padding: 5px;
border-radius: 10px;
}
.text {
background-color: #00007f;
padding: 10px;
color: #aaa;
font-size: 12px;
}
</style>
0 个回复