微信小程序-flex布局

伸缩容器

设有display:flex或者display:block的元素就是一个flex Container(伸缩容器)，里面的子元素称为flex item(伸缩项目)，flex container中子元素都是使用Flex布局排版。

display:block指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。

display:flex指定为行内容器模式，在一行内显示子元素，可以使用flex-wrap属性指定其是否换行，flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)

主轴(main axis)和侧轴(cross axis)

从左到右、从右到左、从上到下、从下到上，都可以指定主轴的起点和终点，与主轴垂直方向的为侧轴，也有相应的起点和终点。

flex-direction

1. row 从左到右的水平方向为主轴
2. row-reverse 从右到左的水平方向为主轴
3. column 从上到下的垂直方向为主轴
4. column-reverse 从下到上的垂直方向为主轴

对齐方式

子元素有两种对齐方式

justify-content 定义子元素在主轴上面的对齐方式

align-items 定义子元素在侧轴上对齐的方式

justify-content

1. flex-start 主轴起点对齐
2. flex-end 主轴终点对齐
3. center 主轴方向居中对齐
4. space-between 两端对齐，两端子元素分别靠两端对齐，其他子元素之间间隔相等
5. space-around 每个子元素之间间距相等，两端子元素间距父容器与其他子元素间距相等

justify-content的对齐方式与主轴方向相关。

align-items

1. stretch 填充整个容器
2. flex-start 侧轴的起点对齐
3. flex-end 侧轴的终点对齐
4. center 侧轴方向居中对齐
5. baseline 以子元素的第一行文本对齐

align-items的对齐方式与侧轴方向有关

Example

.wxml 文件

<view class="test_container">
  <view class="test_top">
    <view class="test_title">测试文本</view>
    <view class="test_select">按钮</view>
  </view>
  <view class="test_bottom">
    <view class="test_left">
      <input placeholder="请输入" />
    </view>
    <view class="test_center">到</view>
    <view class="test_right">
      <input placeholder="请输入" />
    </view>
  </view>
</view>

.wxss 文件

.test_container {
  padding: 50rpx;
}
.test_top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.test_title {
  width: 160rpx;
  line-height: 50rpx;
}
.test_select {
  width: 120rpx;
  text-align: center;
  line-height: 50rpx;
  background: blue;
  border-radius: 4px;
}
.test_bottom {
  margin-left: 160rpx;
  margin-top: 30rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.test_left {
  border: 1px solid black;
}
.test_center {

}
.test_right {
  border: 1px solid black;
}