flex布局,flex-direction
flex布局,flex-direction
1 <template> 2 <view class="container"> 3 <view class="green txt"> 4 A 5 </view> 6 <view class="red txt"> 7 B 8 </view> 9 <view class="blue txt"> 10 C 11 </view> 12 </view> 13 </template> 14 15 <script> 16 export default { 17 data() { 18 return { 19 20 } 21 }, 22 methods: { 23 24 } 25 } 26 </script> 27 28 <style> 29 /* 同级目录 */ 30 @import url("flex-direction.css"); 31 </style>
css
1 .container{ 2 /* 定义flex容器 */ 3 display: flex; 4 /* 5 设置容器内部元素的排列方向 6 row: 定义排列方向 从左到右 7 row-reverse: 从右到左 8 column: 从上到下 9 column-reverse: 从下到上 10 */ 11 flex-direction: column-reverse; 12 13 } 14 15 .txt{ 16 font-size: 20px; 17 width: 150upx; 18 height: 150upx; 19 } 20 21 .red{ 22 background-color: red; 23 } 24 25 .green{ 26 background-color: green; 27 } 28 29 .blue{ 30 background-color: blue; 31 } 32