最近对flex布局用的有点翻车
还是自己上手都实践一下
参考文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
<template>
<view class="father">
<view class="son">1</view>
<view class="dauther">2</view>
<view class="son">3</view>
<view class="dauther">4</view>
<view class="son">5</view>
<view class="dauther">6</view>
<view class="son">7</view>
<view class="dauther">8</view>
<view class="son">9</view>
<view class="dauther">10</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.father{
display: flex;
/* flex-direction: row-reverse; */
}
.son{
width: 100px;
height: 100px;
background-color: #ff5500;
}
.dauther{
width: 50px;
height: 50px;
background-color: #5500ff;
}
</style>
flex-direction: row | row-reverse | column | column-reverse;
这里先来看第一个flex-direction属性,决定排列的方向。
默认值是row,从左往右排。
行翻转
.father{
display: flex;
flex-direction: row-reverse;
}
按列排,从上到下
.father{
display: flex;
flex-direction: column;
}
列翻转
.father{
display: flex;
flex-direction: column-reverse;
}