layout flex, flex-wrap
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 class="pink txt"> 13 D 14 </view> 15 <view class="orange txt"> 16 E 17 </view> 18 <view class="brown txt"> 19 F 20 </view> 21 22 23 </view> 24 </template> 25 26 <script> 27 export default { 28 data() { 29 return { 30 31 } 32 }, 33 methods: { 34 35 } 36 } 37 </script> 38 39 <style> 40 /* 同级目录 */ 41 @import url("flex-wrap.css"); 42 </style>
css
. 1 .container { 2 / * define flex container * / . 3 the display: flex; . 4 / * . 5 disposed inside the container element arrangement direction . 6 Row: arrangement direction defined from left to right . 7 Row-Reverse: right to left . 8 column: from top to bottom . 9 column-Reverse: from the bottom 10 * / . 11 Flex-direction: column; 12 is 13 is / * 14 nowrap: not wrap 15 wrap: wrap 16 * / . 17 Flex-wrap: wrap; 18 is . 19 height: 600upx; 20 background-color: #8F8F94; 21 } 22 23 .txt{ 24 font-size: 20px; 25 width: 150upx; 26 height: 150upx; 27 } 28 29 .red{ 30 background-color: red; 31 } 32 33 .green{ 34 background-color: green; 35 } 36 37 .blue{ 38 background-color: blue; 39 } 40 41 .brown{ 42 background-color: brown; 43 } 44 45 .orange{ 46 background-color: orange; 47 } 48 49 .pink{ 50 background-color: pink; 51 } 52 53