flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap属性,默认情况不换行nowrap
<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;
}
.son{
width: 100px;
height: 100px;
background-color: #ff5500;
}
.dauther{
width: 50px;
height: 50px;
background-color: #5500ff;
}
</style>
换行
.father{
display: flex;
flex-wrap: wrap;
}
倒数换行,第一行在下面
.father{
display: flex;
flex-wrap: wrap-reverse;
}
最后,flex-direction和flex-wrap的简写属性为:flex-flow
flex-flow: <flex-direction> || <flex-wrap>;
.father{
display: flex;
flex-flow: row-reverse wrap;
}