⼩程序_（组件）flex布局
  ⼩程序建议使⽤flex布局进⾏排版
  flex是⼀个盒装弹性布局
  flex是⼀个容器，所有⼦元素都是他的成员
  定义布局：display:flex
  flex容器的属性：
    ⼀、flex-direction：排列⽅向
    ⼆、flex-wrap：换⾏规则
    三、justify-content：对齐⽅式
    四、order：成员之间的显⽰顺序
    五、flex：成员所占屏幕的⽐例
⼀、flex-direction：排列⽅向
  【默认】row：从左到右⾏排序
  row-reverse：从右到左⾏排序
  colomn：从上到下列排序
  colomn-reverse：从下到上列排序
  index.html中定义五个<view>分别加上a、b、c、d、e五个⽂本标签，⼩程序中默认flex-direction:row
<!--index.wxml-->
Cynical⼂Gary
<view class="container">
<view class='a size'>a</view>
<view class='b size'>b</view>
<view class='c size'>c</view>
<view class='d size'>d</view>
<view class='e size'>e</view>
</view>
index.html
.container{
display: flex;
/* 默认从左到右排序 */
/* flex-direction: row; */
/* 从右到左排序  */
/* flex-direction: row-reverse; */
/* 从上到下排序 */
/* flex-direction: column; */
/
* 从下到上排序 */
/* flex-direction: column-reverse; */ }
.size{
width: 150rpx;
height: 150rpx;
}
.a{
background: red;
}
.b{
background: yellow;
}
.c{
background: blue;
}
.d{
background: green;
}
.e{
background: orange;
}
index.wxss
⼆、flex-wrap：换⾏规则
  【默认】nowrap：不换⾏
  wrap：换⾏
  wrap-reverse：逆向换⾏
  当五个元素size超出⼩程序横向排版时（320），⼩程序默认使⽤flex-wrap: nowrap不换⾏
<!--index.wxml-->
Cynical⼂Gary
<view class="container">
<view class='a size'>a</view>
<view class='b size'>b</view>
<view class='c size'>c</view>
<view class='d size'>d</view>
<view class='e size'>e</view>
</view>
index.wxml
.container{
display: flex;
/* 默认不换⾏ */
/* flex-wrap: nowrap; */
/* 换⾏ */
/* flex-wrap: wrap; */
/* 逆向换⾏ */
/* flex-wrap: wrap-reverse; */
}
.size{
width: 500rpx;
height: 150rpx;
}
.a{
background: red;
}
.b{
background: yellow;
}
.
c{
background: blue;
}
.d{
background: green;
}
.e{
background: orange;
}
index.wxss
三、justify-content：对齐⽅式
  【默认】flex-start：从左到右，向左对齐
  flex-end：从右到左，向右对齐
  center：居中对齐
  space-between：块级元素中间有空格
  space-around：让空格围绕在成员周围
  当五个元素并列排序size未超出⼩程序横向布局
<!--index.wxml-->
Cynical⼂Gary
<view class="container">
<view class='a size'>a</view> <view class='b size'>b</view> <view class='c size'>c</view> <view class='d size'>d</view> <view class='e size'>e</view>
</view>
index.wxml
flex布局详细讲解

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。