微信小程序——flex框架笔记

微信小程序——flex框架笔记

一些关于flex框架的笔记

1.准备工作

新建一个quck start项目。
删除 index.wxml index.wxss app.wxss的内容
然后在 index.wxml 中编写代码

<view class="container">
	<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>

在index.wxss 中配置一下container和item类

.container{
  height: 500px;
  width: 100%;
  background-color: blueviolet;
}

.item{
  width: 100rpx;
  height: 100rpx;
  background-color: crimson;
  border: 1px white solid;
}

效果如下：

2.调用flex

微信小程序的默认排列方式是竖着排的，就像上图。
而flex框架则是横向排列。
修改index.wxss 中的container代码，添加display: flex;

.container{
  height: 500px;
  width: 100%;
  background-color: blueviolet;

  display: flex;
}

重新调试运行后发现项目横向排列：

3.flex-direction

flex-direction可以改变flex框架下的元素排列方式，默认为row（即横向排列）

4.flex-wrap

flex-wrap表示换行方式，默认为nowrap

• wrap直接换行
  

• wrap-reverse反着换
  

5.flex-flow

flex-flow可以同时设置flex-direction和flex-wrap的值
如flex-flow: row wrap;表示

  flex-direction: row;
  flex-wrap: wrap;

6.justify-content

justify-content可以设置主轴对齐方式

• flex-start 左对齐
  

• flex-end 右对齐
  

• center 居中
  

• space-around 每个元素左右两端占据位置相同
  

• space-between 两端对齐
  

7.align-items

align-items 可以设置交叉轴的对齐方式

• flex-start
  

• flex-end
  

• center
  

• stretch
  

• baseline
  

8.flex-grow

flex-grow表示占有份数

9.flex-shrink

flex-shrink表示压缩份数，当空间不足时，压缩。值为0时表示不压缩

注flex是grow、shrink和basis的简写。
如flex:0 1 100px等价于

flex-grow: 0;
flex-shrink: 1;
flex-basis: 100px;

10.order

order可以设置元素排列顺序

11.align-self

align-self定义元素自身的对齐方式