flex布局，flex-item
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 <!-- 缩放用的 --> 13 <!-- <view class="green txt"> 14 D 15 </view> 16 <view class="red txt"> 17 E 18 </view> 19 <view class="blue txt"> 20 F 21 </view> --> 22 </view> 23 </template> 24 25 <script> 26 export default { 27 data() { 28 return { 29 30 } 31 }, 32 methods: { 33 34 } 35 } 36 </script> 37 38 <style> 39 /* 同级目录 */ 40 @import url("flex-items.css"); 41 </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: row; 12 13 } 14 15 .txt{ 16 font-size: 20px; 17 150upx; 18 height: 150upx; 19 } 20 21 /* 22 order: 用于吧设置flex容器内部的 每个元素的 排列顺序， 默认是0 23 排序规则， 有小到大 24 flex-grow: 用于设置元素的放大比例， 默认为0 25 如果为0， 则不放大 26 flex-shrink: 用于定义属性的 缩放比例， 默认为1 27 设置为 0 的时候， 不进行缩放 28 负数没效果 29 flex-basis: 设置长度或者占比 30 */ 31 .red{ 32 background-color: red; 33 /* order: 3; */ 34 /* flex-grow: 1; */ 35 flex-shrink: 0; 36 flex-basis: 100upx; 37 } 38 39 .green{ 40 background-color: green; 41 /* order: 2; */ 42 /* flex-grow: 1; */ 43 flex-shrink: 0; 44 } 45 46 .blue{ 47 background-color: blue; 48 /* order: 1 */ 49 /* flex-grow: 1; */ 50 flex-shrink: 0; 51 } 52