伸缩容器
设有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
- row 从左到右的水平方向为主轴
- row-reverse 从右到左的水平方向为主轴
- column 从上到下的垂直方向为主轴
- column-reverse 从下到上的垂直方向为主轴
对齐方式
子元素有两种对齐方式
justify-content 定义子元素在主轴上面的对齐方式
align-items 定义子元素在侧轴上对齐的方式
justify-content
- flex-start 主轴起点对齐
- flex-end 主轴终点对齐
- center 主轴方向居中对齐
- space-between 两端对齐，两端子元素分别靠两端对齐，其他子元素之间间隔相等
- space-around 每个子元素之间间距相等，两端子元素间距父容器与其他子元素间距相等
justify-content的对齐方式与主轴方向相关。
align-items
- stretch 填充整个容器
- flex-start 侧轴的起点对齐
- flex-end 侧轴的终点对齐
- center 侧轴方向居中对齐
- 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;
}
