微信小程序---flex布局

微信小程序—flex布局

基础代码

<!-- .wxml -->
<view class='container'>
  <view class='chunk color1'>1</view>
  <view class='chunk color2'>2</view>
  <view class='chunk color3'>3</view>
</view>

/* .wxss */
.chunk{
  height: 100px;
  width: 100px;
}
.container {
  height: 400px;
  background: #898989;
}
.color1{
  background-color: red;
}
.color2{
  background-color: blue;
}
.color3{
  background-color: pink;
}

view 组件

使用 view 组件时，默认是列向排列

默认view布局

view 组件更改排列方向

display: inline;

使用 display: inline; 可以实现横向排列，但是不能设置高度和宽度，代码中虽然设置，但是无作用。

display: inline;

/* .wxss */
/* 增加 display: inline; */
.chunk{
  height: 100px;
  width: 100px;
  display: inline;
}
.container {
  height: 400px;
  background: #898989;
}
.color1{
  background-color: red;
}
.color2{
  background-color: blue;
}
.color3{
  background-color: pink;
}

display: inline-block;

inline-block 可以设置高度和宽度。

display: inline-block;

/* .wxss */
/* 增加 display: inline-block; */
.chunk{
  height: 100px;
  width: 100px;
  display: inline-block;
}
.container {
  height: 400px;
  background: #898989;
}
.color1{
  background-color: red;
}
.color2{
  background-color: blue;
}
.color3{
  background-color: pink;
}

flex

而当使用 flex 布局时，默认是横向排列

flex默认布局

/* .wxss */
/* 使用flex布局 */
.chunk{
  height: 100px;
  width: 100px;
}
.container {
  height: 400px;
  display: flex;
  background: #898989;
}
.color1{
  background-color: red;
}
.color2{
  background-color: blue;
}
.color3{
  background-color: pink;
}

更改排列方向

flex-direction: column;

/* .wxss */
/* flex-direction: row; 实现行内排列， column实现列内排列*/
.chunk{
  height: 100px;
  width: 100px;
}
.container {
  height: 400px;
  display: flex;
  background: #898989;
}
.color1{
  background-color: red;
}
.color2{
  background-color: blue;
}
.color3{
  background-color: pink;
}

使用 flex 布局还有一个方便实现的功能 ————实现 view 组件的倒序排列只需要加一个 flex-direction: row-reverse;

flex-direction: row-reverse;

/* .wxss */
/* flex-direction: row-reverse;  实现行内倒序排列 column-reverse;*/
.chunk{
  height: 100px;
  width: 100px;
}
.container {
  height: 400px;
  display: flex;
  background: #898989;
  flex-direction: column-reverse;
}
.color1{
  background-color: red;
}
.color2{
  background-color: blue;
}
.color3{
  background-color: pink;
}

这时候发现一个问题，现在是从底部开始排列的，想要在顶部开始排列，加上 justify-content: flex-end;

justify-content: flex-end;

/* .wxss */
/*   justify-content: flex-end;*/
/* justify-content: space-between; 平均分布  center 剧中分布  space-around 等距分布 */
.chunk{
  height: 100px;
  width: 100px;
}
.container {
  height: 400px;
  display: flex;
  background: #898989;
  flex-direction: column-reverse;
  justify-content: flex-end;
}
.color1{
  background-color: red;
}
.color2{
  background-color: blue;
}
.color3{
  background-color: pink;
}

这时仔细的你发现，flex-end 不是应该是从底部开始排列的？

再仔细的你就会发现，前面加入了 flex-direction: column-reverse; 反转了一下，所以 flex-end 就变成 flex-start 的效果了。

flex布局