伸縮容器
設(shè)有display:flex或者display:block的元素就是一個(gè)flex Container(伸縮容器)勤庐，里面的子元素稱為flex item(伸縮項(xiàng)目)，flex container中子元素都是使用Flex布局排版。
display:block指定為塊內(nèi)容器模式璧眠，總是使用新行開始顯示渠鸽，微信小程序的視圖容器(view,scroll-view和swiper)默認(rèn)都是dispaly:block。
display:flex指定為行內(nèi)容器模式踩衩，在一行內(nèi)顯示子元素嚼鹉，可以使用flex-wrap屬性指定其是否換行贩汉，flex-wrap有三個(gè)值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)
主軸(main axis)和側(cè)軸(cross axis)
從左到右、從右到左锚赤、從上到下匹舞、從下到上，都可以指定主軸的起點(diǎn)和終點(diǎn)线脚，與主軸垂直方向的為側(cè)軸赐稽，也有相應(yīng)的起點(diǎn)和終點(diǎn)。
flex-direction
- row 從左到右的水平方向?yàn)橹鬏S
- row-reverse 從右到左的水平方向?yàn)橹鬏S
- column 從上到下的垂直方向?yàn)橹鬏S
- column-reverse 從下到上的垂直方向?yàn)橹鬏S
對齊方式
子元素有兩種對齊方式
justify-content 定義子元素在主軸上面的對齊方式
align-items 定義子元素在側(cè)軸上對齊的方式
justify-content
- flex-start 主軸起點(diǎn)對齊
- flex-end 主軸終點(diǎn)對齊
- center 主軸方向居中對齊
- space-between 兩端對齊浑侥，兩端子元素分別靠兩端對齊姊舵，其他子元素之間間隔相等
- space-around 每個(gè)子元素之間間距相等，兩端子元素間距父容器與其他子元素間距相等
justify-content的對齊方式與主軸方向相關(guān)寓落。
align-items
- stretch 填充整個(gè)容器
- flex-start 側(cè)軸的起點(diǎn)對齊
- flex-end 側(cè)軸的終點(diǎn)對齊
- center 側(cè)軸方向居中對齊
- baseline 以子元素的第一行文本對齊
align-items的對齊方式與側(cè)軸方向有關(guān)
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;
}
