微信小程序_(组件)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

 

.container{
  display: flex;
  /* flex-start:默认左对齐 */
  /* justify-content: flex-start; */
  /* flex-end:向右对齐 */
  /* justify-content: flex-end; */
  /* center:居中对齐 */
  /* justify-content: center; */
  /* space-between:块级元素中间有空格 */
  /* justify-content: space-between; */
  /* space-around:让空格围绕在成员周围 */
  /* justify-content:space-around;  */
}

.size{
  width: 100rpx;
  height: 150rpx;
}

.a{
  background: red;
}

.b{
  background: yellow;
}

.c{
  background: blue;
}

.d{
  background: green;
}

.e{
  background: orange;
}
index.wxss

 

 

四、order:成员之间的显示顺序

  五个元素并列排序由order属性决定,本来d和e中order属性分别是4和5,现将order属性改为5和4,可见d和e块级元素位置进行了交换

 

<!--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;

}

.size{
  width: 100rpx;
  height: 150rpx;
}

.a{
  background: red;
  order:1;
}

.b{
  background: yellow;
  order:2;
}

.c{
  background: blue;
  order:3;
}

.d{
  background: green;
  order:4;
}

.e{
  background: orange;
  order:5;
}
index.wxss

 

 

五、flex:成员所占屏幕的比例

  当给五个块级元素a、b、c、d、e设置order为1时候,每个元素所占当行比例的1/5,当将a的order设置为3时,a元素占当行比例的3/(3+1+1+1+1),依次类推

 

<!--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;

}

.size{
  width: 100rpx;
  height: 150rpx;
}

.a{
  background: red;
  order:1;
  flex:10;
}

.b{
  background: yellow;
  order:2;
  flex:2;
}

.c{
  background: blue;
  order:3;
  flex:1;
}

.d{
  background: green;
  order:4;
  flex:1;
}

.e{
  background: orange;
  order:5;
  flex:1;
}
index.wxss

 

posted @ 2019-03-28 17:04 Cynical丶Gary 阅读(...) 评论(...) 编辑 收藏