微信小程序view布局 Flex
微信小程序 View 支持两种布局方式:Block 和 Flex
所有 View 默认都是 block
要使用 flex 布局的话需要显式的声明:display:flex
wxml页面:
<view class="A">
<view class='item1'>你好</view>
<view class='item2'>你好</view>
<view class='item3'>你好</view>
</view>
wxss页面:
.A{
background: #f9f9;
width: 100%;
display: flex;
flex-direction:column-reverse;
}
.item1 {
background-color: red;
}
.item2 {
background-color: dodgerblue;
}
.item3 {
background-color: greenyellow;
}
显示:
然后我们先都加上 display: flex
使用 flex 布局,主意,貌似 view 不会自动继承,需要在每个想使用的 view 里都加上。
首先是横向布局和竖向布局,要设置属性 flex-direction ,它有4个可选值:
- row:从左到右的水平方向为主轴
- row-reverse:从右到左的水平方向为主轴
- column:从上到下的垂直方向为主轴
- column-reverse:从下到上的垂直方向为主轴
row:
.A{
background: #f9f9;
width: 100%;
display:flex;
flex-direction:rowrow;
}
row-reverse:
.A{
background: #f9f9;
width: 100%;
display:flex;
flex-direction:row-reverse;
}
然后我们要设置元素在横向上的布局方向,需要设置 justify-content 属性,它有5个值可选:
- flex-start:主轴起点对齐(默认值
.A{
background: #f9f9;
width: 100%;
display:flex;
justify-content:flex-star;
}
- flex-end:主轴结束点对齐
.A{
background: #f9f9;
width: 100%;
display:flex;
justify-content: flex-end;
}
- center:在主轴中居中对齐
.A{
background: #f9f9;
width: 100%;
display:flex;
justify-content: center;
}
- space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
.A{
background: #f9f9;
width: 100%;
display:flex;
justify-content: space-between;
}
-space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同
.A{
background: #f9f9;
width: 100%;
display:flex;
justify-content: space-around;
}