首页>内容

微信小程序flex布局

微信

小坏蛋 / 06-09 / 评论 / 阅读 / 赞

作者有点忙，还没写简介

文章描述：

微信小程序里面如何使用flex布局，flex布局属性有哪些？

初始布局

wxml

<view class="list">
 <view class="item">1</view>
 <view class="item">2</view>
 <view class="item">3</view>
 <view class="item">4</view>
 <view class="item">5</view>
</view>

wxss

.list {
  background-color: rgb(24, 204, 228);
  width: 100%;
  height: 100%;
}
.item {
  background-color: rgb(253, 207, 1);
  width: 120rpx;
  height: 120rpx;
  border: 1px solid rgb(255, 255, 255,.5);
}

flex布局

.list {
  background-color: rgb(24, 204, 228);
  width: 100%;
  height: 100%;
  display: flex;
}

flex-direction属性

flex-direction的使用(决定元素的排列方向)，flex-direction共有四个值，分别为row、row-reverse、column、column-reverse其中row为默认值。
row

row-reverse

column

column-reverse

flex-wrap属性

flex-wrap(决定元素在排列不下的时候如何换行)，共有3个常用值，分别是nowrap、wrap、wrap-reverse，其中nowrap为默认值。

wxml

<view class="list">
 <view class="item">1</view>
 <view class="item">2</view>
 <view class="item">3</view>
 <view class="item">4</view>
 <view class="item">5</view>
 <view class="item">6</view>
 <view class="item">7</view>
 <view class="item">8</view>
 <view class="item">9</view>
 <view class="item">10</view>
</view>

nowrap
nowrap属性是元素放不下时会被强行拉伸: